Skip to content

Commit

Permalink
tab size setting
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcv8000
jcv8000 committed Oct 19, 2023
1 parent 3092681 commit 5f5b86c
Show file tree
Hide file tree
Showing 7 changed files with 62 additions and 15 deletions.
12 changes: 12 additions & 0 deletions packages/common/Locales.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ export type Locale = {
accent_color: string;
code_block_theme: string;
code_block_word_wrap: string;
code_block_tab_size: {
label: string;
desc: string;
four_spaces: string;
two_spaces: string;
};
language: string;
contribute_language: string;
theme: string;
Expand Down Expand Up @@ -288,6 +294,12 @@ export const locales: Record<SupportedLocales, Locale> = {
accent_color: "Accent Color",
code_block_theme: "Code Block Theme",
code_block_word_wrap: "Word Wrap in Code Blocks",
code_block_tab_size: {
label: "Code Block Tab Size",
desc: "Affects how many spaces to add/remove when pressing Tab/Shift-Tab in code",
four_spaces: "4 Spaces (Default)",
two_spaces: "2 Spaces"
},
language: "Language",
contribute_language:
"Contribute your own translation by opening a pull request on GitHub",
Expand Down
1 change: 1 addition & 0 deletions packages/common/Prefs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ class EditorPrefs {
openPDFonExport = true;
recentCodeLangs: string[] = [];
codeWordWrap = false;
tabSize = 4;
}

class MiscPrefs {
Expand Down
5 changes: 4 additions & 1 deletion packages/renderer/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ export function App() {

const editorRef = useRef<Editor | null>(null);
const fakeEditor = useRef<Editor>(
new Editor({ editable: false, extensions: extensions({ useTypography: false }) })
new Editor({
editable: false,
extensions: extensions({ useTypography: false, tabSize: 4 })
})
);

const locale = locales[prefs.current.general.locale];
Expand Down
5 changes: 3 additions & 2 deletions packages/renderer/src/components/Views/Editor/EditorExtensions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { CustomCode } from "./extensions/CustomCode";
import { CustomTable } from "./extensions/CustomTable";
import { ResizableImage } from "./extensions/ResizableImage/ResizableImage";

export function extensions(options: { useTypography: boolean }) {
export function extensions(options: { useTypography: boolean; tabSize: number }) {
const e = [
StarterKit.configure({
codeBlock: false,
Expand All @@ -48,7 +48,8 @@ export function extensions(options: { useTypography: boolean }) {
placeholder: "Start typing..."
}),
CustomCodeBlock.configure({
lowlight: createLowlight(lowlightAll)
lowlight: createLowlight(lowlightAll),
tabSize: options.tabSize
}),
ResizableImage.configure({
allowBase64: true
Expand Down
3 changes: 2 additions & 1 deletion packages/renderer/src/components/Views/Editor/EditorView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ export function EditorView({ page, setEditorRef }: Props) {
const editor = useEditor(
{
extensions: extensions({
useTypography: appContext.prefs.editor.useTypographyExtension
useTypography: appContext.prefs.editor.useTypographyExtension,
tabSize: appContext.prefs.editor.tabSize
}),
autofocus: true,
content: JSON.parse(window.api.loadPage(page.fileName))
Expand Down
36 changes: 25 additions & 11 deletions packages/renderer/src/components/Views/Editor/extensions/CustomCodeBlock/CustomCodeBlock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { TextSelection } from "@tiptap/pm/state";
interface CustomCodeBlockOptions extends CodeBlockOptions {
lowlight: any;
defaultLanguage: string | null | undefined;
tabSize: number;
}

export const CustomCodeBlock = CodeBlock.extend<CustomCodeBlockOptions>({
Expand Down Expand Up @@ -132,13 +133,19 @@ export const CustomCodeBlock = CodeBlock.extend<CustomCodeBlockOptions>({
return {
// ...this.parent?.(),
Tab: () => {
let TAB_TEXT = "";
const TAB_SIZE = this.options.tabSize > 0 ? this.options.tabSize : 4;
for (let i = 0; i < TAB_SIZE; i++) {
TAB_TEXT += " ";
}

const { $anchor, $head } = this.editor.state.selection;
if (
$anchor.parent.type.name == "codeBlock" &&
$head.parent.type.name == "codeBlock"
) {
if (this.editor.state.selection.empty) {
this.editor.view.dispatch(this.editor.state.tr.insertText(" "));
this.editor.view.dispatch(this.editor.state.tr.insertText(TAB_TEXT));
return true;
} else {
const state = this.editor.state;
Expand All @@ -158,13 +165,13 @@ export const CustomCodeBlock = CodeBlock.extend<CustomCodeBlockOptions>({

const full = node.textBetween(startLineStart, endLineEnd);

let newFull = full.replaceAll("\n", "\n ");
let newFull = full.replaceAll("\n", "\n" + TAB_TEXT);
let charsAddedInFirstLine = 0;

if (start < node.textContent.indexOf("\n")) {
newFull = " " + newFull;
charsAddedInFirstLine = 4;
} else if (full.startsWith("\n")) charsAddedInFirstLine = 4;
newFull = TAB_TEXT + newFull;
charsAddedInFirstLine = TAB_SIZE;
} else if (full.startsWith("\n")) charsAddedInFirstLine = TAB_SIZE;

const charsAdded = newFull.length - full.length;

Expand Down Expand Up @@ -200,6 +207,12 @@ export const CustomCodeBlock = CodeBlock.extend<CustomCodeBlockOptions>({
return false;
},
"Shift-Tab": () => {
let TAB_TEXT = "";
const TAB_SIZE = this.options.tabSize > 0 ? this.options.tabSize : 4;
for (let i = 0; i < TAB_SIZE; i++) {
TAB_TEXT += " ";
}

const { $anchor, $head } = this.editor.state.selection;
if (
$anchor.parent.type.name == "codeBlock" &&
Expand All @@ -223,7 +236,7 @@ export const CustomCodeBlock = CodeBlock.extend<CustomCodeBlockOptions>({

let line = node.textBetween(lineStart, lineEnd);

for (let i = 0; i < 4; i++) {
for (let i = 0; i < TAB_SIZE; i++) {
const c = line.charAt(0);
if (c == " ") {
tr.delete(lineStart + offset + 1, lineStart + offset + 2);
Expand All @@ -247,16 +260,17 @@ export const CustomCodeBlock = CodeBlock.extend<CustomCodeBlockOptions>({

const full = node.textBetween(startLineStart, endLineEnd);

const regex = /\n {4}/gm;
const regex = new RegExp("\n {" + TAB_SIZE + "}", "gm");
let newFull = full.replaceAll(regex, "\n");
let charsLostInFirstLine = 0;

if (start < node.textContent.indexOf("\n")) {
if (newFull.startsWith(" ")) {
newFull = newFull.substring(4, newFull.length);
charsLostInFirstLine = 4;
if (newFull.startsWith(TAB_TEXT)) {
newFull = newFull.substring(TAB_SIZE, newFull.length);
charsLostInFirstLine = TAB_SIZE;
}
} else if (full.startsWith("\n ")) charsLostInFirstLine = 4;
} else if (full.startsWith("\n" + TAB_TEXT))
charsLostInFirstLine = TAB_SIZE;

const charsLost = full.length - newFull.length;

Expand Down
15 changes: 15 additions & 0 deletions packages/renderer/src/components/Views/SettingsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,21 @@ export function SettingsView(props: { startPrefs: Prefs }) {
}}
/>

<Select
mb="xl"
label={texts.code_block_tab_size.label}
description={texts.code_block_tab_size.desc}
value={prefs.editor.tabSize.toString()}
data={[
{ value: "4", label: texts.code_block_tab_size.four_spaces },
{ value: "2", label: texts.code_block_tab_size.two_spaces }
]}
icon={<Icon icon="indent-increase" />}
onChange={(value) => {
modifyPrefs((p) => (p.editor.tabSize = parseInt(value!)));
}}
/>

<Checkbox
mb="xl"
label={texts.code_block_word_wrap}
Expand Down

0 comments on commit 5f5b86c

Please sign in to comment.