Skip to content

Commit

Permalink
style(editor): add missing semicolons and fix indentation
Browse files Browse the repository at this point in the history
- Add missing semicolons to import statements and fix indentation for consistency.
  • Loading branch information
phodal committed Sep 23, 2024
1 parent 5a84f39 commit f9e7dcc
Show file tree
Hide file tree
Showing 5 changed files with 130 additions and 115 deletions.
219 changes: 111 additions & 108 deletions web/core/lib/editor/live-editor.tsx
Original file line number Diff line number Diff line change
@@ -1,128 +1,131 @@
import React, { useEffect } from 'react'
import React, { useEffect } from 'react';

import { EditorContent, useEditor } from '@tiptap/react'
import { Color } from '@tiptap/extension-color'
import ListItem from '@tiptap/extension-list-item'
import TextStyle from '@tiptap/extension-text-style'
import StarterKit from '@tiptap/starter-kit'
import { CharacterCount } from "@tiptap/extension-character-count";
import { Table } from "@tiptap/extension-table";
import { TableRow } from "@tiptap/extension-table-row";
import { TableCell } from "@tiptap/extension-table-cell";
import { TableHeader } from "@tiptap/extension-table-header";
import { EditorContent, useEditor } from '@tiptap/react';
import { Color } from '@tiptap/extension-color';
import ListItem from '@tiptap/extension-list-item';
import TextStyle from '@tiptap/extension-text-style';
import StarterKit from '@tiptap/starter-kit';
import { CharacterCount } from '@tiptap/extension-character-count';
import { Table } from '@tiptap/extension-table';
import { TableRow } from '@tiptap/extension-table-row';
import { TableCell } from '@tiptap/extension-table-cell';
import { TableHeader } from '@tiptap/extension-table-header';

import MarkdownIt from 'markdown-it'
import { useTranslation } from "react-i18next";
import MarkdownIt from 'markdown-it';
import { useTranslation } from 'react-i18next';
import { useDebounce } from 'use-debounce';
import { Theme } from '@radix-ui/themes';

import "./editor.css"
import './editor.css';

import { InlineCompletion } from "@/editor/extensions/inline-completion/inline-completion";
import { MenuBubble } from '@/editor/menu/menu-bubble'
import { createSlashExtension } from '@/editor/extensions/slash-command/slash-extension.ts'
import { createQuickBox } from '@/editor/extensions/quick-box/quick-box-extension'
import { InlineCompletion } from '@/editor/extensions/inline-completion/inline-completion';
import { MenuBubble } from '@/editor/menu/menu-bubble';
import { createSlashExtension } from '@/editor/extensions/slash-command/slash-extension.ts';
import { createQuickBox } from '@/editor/extensions/quick-box/quick-box-extension';
import { AdviceExtension } from '@/editor/extensions/advice/advice-extension';
import { ToolbarMenu } from '@/editor/menu/toolbar-menu.tsx'
import { CustomEditorCommands } from '@/editor/action/custom-editor-commands.ts'
import { Sidebar } from '@/editor/components/sidebar.tsx'
import { Advice } from "@/editor/extensions/advice/advice";
import { AdviceManager } from "@/editor/extensions/advice/advice-manager";
import { AdviceView } from "@/editor/extensions/advice/advice-view";
import { Settings } from "@/editor/components/settings";
import { ToolbarMenu } from '@/editor/menu/toolbar-menu.tsx';
import { CustomEditorCommands } from '@/editor/action/custom-editor-commands.ts';
import { Sidebar } from '@/editor/components/sidebar.tsx';
import { Advice } from '@/editor/extensions/advice/advice';
import { AdviceManager } from '@/editor/extensions/advice/advice-manager';
import { AdviceView } from '@/editor/extensions/advice/advice-view';
import { Settings } from '@/editor/components/settings';
import { PromptsManager } from '@/editor/prompts/prompts-manager.ts';

const md = new MarkdownIt()
const md = new MarkdownIt();

export const setupExtensions = (promptsManager: PromptsManager = PromptsManager.getInstance()) => {
return [
// we define all commands here
CustomEditorCommands(promptsManager),
AdviceExtension.configure({
HTMLAttributes: {
class: "my-advice",
},
setAdviceCommand: (advice: Advice) => {
AdviceManager.getInstance().addAdvice(advice);
},
onAdviceActivated: (adviceId) => {
if (adviceId) AdviceManager.getInstance().setActiveId(adviceId);
},
}),
InlineCompletion,
StarterKit.configure({
bulletList: {
keepMarks: true,
keepAttributes: false,
},
orderedList: {
keepMarks: true,
keepAttributes: false,
},
}),
createSlashExtension(promptsManager),
createQuickBox(),
CharacterCount.configure({}),
Color.configure({ types: [TextStyle.name, ListItem.name] }),
// @ts-ignore
TextStyle.configure({ types: [ListItem.name] }),
Table,
TableRow,
TableCell,
TableHeader
]
}
return [
// we define all commands here
CustomEditorCommands(promptsManager),
AdviceExtension.configure({
HTMLAttributes: {
class: 'my-advice'
},
setAdviceCommand: (advice: Advice) => {
AdviceManager.getInstance().addAdvice(advice);
},
onAdviceActivated: (adviceId) => {
if (adviceId) AdviceManager.getInstance().setActiveId(adviceId);
}
}),
InlineCompletion,
StarterKit.configure({
bulletList: {
keepMarks: true,
keepAttributes: false
},
orderedList: {
keepMarks: true,
keepAttributes: false
}
}),
createSlashExtension(promptsManager),
createQuickBox(),
CharacterCount.configure({}),
Color.configure({ types: [TextStyle.name, ListItem.name] }),
// @ts-ignore
TextStyle.configure({ types: [ListItem.name] }),
Table,
TableRow,
TableCell,
TableHeader
];
};

const LiveEditor = () => {
const { t } = useTranslation();
const { t } = useTranslation();

const editor = useEditor({
extensions: setupExtensions(PromptsManager.getInstance()),
content: md.render(t('Editor Placeholder')),
editorProps: {
attributes: {
class: 'prose lg:prose-xl bb-editor-inner',
},
}
})
const editor = useEditor({
extensions: setupExtensions(PromptsManager.getInstance()),
content: md.render(t('Editor Placeholder')),
editorProps: {
attributes: {
class: 'prose lg:prose-xl bb-editor-inner'
}
}
});

const [debouncedEditor] = useDebounce(editor?.state.doc.content, 2000);
useEffect(() => {
if (debouncedEditor) {
localStorage.setItem('editor', JSON.stringify(editor.getJSON()))
}
}, [debouncedEditor]);
const [debouncedEditor] = useDebounce(editor?.state.doc.content, 2000);
useEffect(() => {
if (debouncedEditor) {
localStorage.setItem('editor', JSON.stringify(editor.getJSON()));
}
}, [debouncedEditor]);

useEffect(() => {
const content = localStorage.getItem('editor');
if (content) {
try {
editor?.commands?.setContent(JSON.parse(content));
} catch (e) {
editor?.commands?.setContent(md.render(t('Editor Placeholder')));
console.error(e);
}
}
}, [editor]);
useEffect(() => {
const content = localStorage.getItem('editor');
if (content) {
try {
editor?.commands?.setContent(JSON.parse(content));
} catch (e) {
editor?.commands?.setContent(md.render(t('Editor Placeholder')));
console.error(e);
}
}
}, [editor]);

return <div className={'w-full flex editor-block'}>
{editor && <div className={'lg:flex md:hidden sm:hidden hidden'}><Sidebar eidtor={editor}/></div>}
return <Theme>
<div className={'w-full flex editor-block'}>
{editor && <div className={'lg:flex md:hidden sm:hidden hidden'}><Sidebar eidtor={editor} /></div>}

<div className={'w-full editor-section'}>
{editor && <Settings editor={editor}/>}
{editor && <ToolbarMenu className={'toolbar-menu'} editor={editor}/>}
<div className={'editor-main'}>
<EditorContent editor={editor}/>
<div>{editor && <MenuBubble editor={editor}/>}</div>
<div className={'w-full editor-section'}>
{editor && <Settings editor={editor} />}
{editor && <ToolbarMenu className={'toolbar-menu'} editor={editor} />}
<div className={'editor-main'}>
<EditorContent editor={editor} />
<div>{editor && <MenuBubble editor={editor} />}</div>

{editor && <div className="character-count">
<p className={'p-2'}>{editor.storage.characterCount.characters()} characters</p>
<p className={'p-2'}>{editor.storage.characterCount.words()} words</p>
{editor && <div className="character-count">
<p className={'p-2'}>{editor.storage.characterCount.characters()} characters</p>
<p className={'p-2'}>{editor.storage.characterCount.words()} words</p>
</div>
}
</div>
}
</div>
</div>
{editor && <AdviceView editor={editor}/>}
</div>
}
</div>
{editor && <AdviceView editor={editor} />}
</div>
</Theme>;
};

export default LiveEditor
export default LiveEditor;
14 changes: 13 additions & 1 deletion web/core/lib/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,29 @@ export { default as LiveEditor } from '@/editor/live-editor';
export { setupExtensions } from '@/editor/live-editor';
export { ToolbarMenu } from '@/editor/menu/toolbar-menu';
export { PromptsManager } from '@/editor/prompts/prompts-manager.ts';
/// eslint-disable import/prefer-default-export
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { InlineCompletion } from '@/editor/extensions/inline-completion/inline-completion';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { MenuBubble } from '@/editor/menu/menu-bubble';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { createSlashExtension } from '@/editor/extensions/slash-command/slash-extension.ts';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { createQuickBox } from '@/editor/extensions/quick-box/quick-box-extension';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { AdviceExtension } from '@/editor/extensions/advice/advice-extension';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { ToolbarMenu } from '@/editor/menu/toolbar-menu.tsx';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { CustomEditorCommands } from '@/editor/action/custom-editor-commands.ts';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Sidebar } from '@/editor/components/sidebar.tsx';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Advice } from '@/editor/extensions/advice/advice';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { AdviceManager } from '@/editor/extensions/advice/advice-manager';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { AdviceView } from '@/editor/extensions/advice/advice-view';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Settings } from '@/editor/components/settings';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { PromptsManager } from '@/editor/prompts/prompts-manager.ts';
4 changes: 3 additions & 1 deletion web/core/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
// "strict": true,
// "noUnusedLocals": true,
// "noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
"noFallthroughCasesInSwitch": true,
// no-unused-vars
"noUnusedVars": true,
},
"include": ["lib"],
"references": [
Expand Down
3 changes: 2 additions & 1 deletion web/core/tsconfig.node.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
"allowSyntheticDefaultImports": true,
"noUnusedVars": true
},
"include": ["vite.config.mts"]
}
5 changes: 1 addition & 4 deletions web/studio/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import "../styles/editor-styles.css"
import styles from '../styles/Home.module.css'
import {LiveEditor} from '@studio-b3/web-core'
import '@/i18n/i18n';
import { Theme } from '@radix-ui/themes';

export default function Home() {
return (
Expand All @@ -16,9 +15,7 @@ export default function Home() {

<main>
<div>
<Theme>
<LiveEditor />
</Theme>
<LiveEditor />
</div>
</main>
</div>
Expand Down

0 comments on commit f9e7dcc

Please sign in to comment.