feat: refactor code, dynamic bubble, toolbar, fix error

Author: hunghg255

docs/.vitepress/components/HomePage.vue

@@ -18,6 +18,12 @@ const members = computed(() => [
     title: t('Contributor'),
     links: [{ icon: 'github', link: 'https://github.com/condorheroblog' }],
   },
+  {
+    avatar: 'https://github.com/meliora.png',
+    name: 'Meliora',
+    title: t('Contributor'),
+    links: [{ icon: 'github', link: 'https://github.com/meliora' }],
+  },
 ]);
 </script>
 

docs/.vitepress/config.ts

@@ -42,61 +42,61 @@ export default defineConfig({
     hostname: docsLink,
   },
   transformHead,
-  markdown: {
-    codeTransformers: [
-      {
-        // Render custom themes with codeblocks
-        name: 'shiki:inline-theme',
-        preprocess(code, options) {
-          const reg = /\btheme:([\w,-]+)\b/;
-          const match = options.meta?.__raw?.match(reg);
-          if (!match?.[1]) return;
-          const theme = match[1];
-          const themes = theme.split(',').map((i) => i.trim());
-          if (!themes.length) return;
-          if (themes.length === 1) {
-            // @ts-expect-error anyway
-            delete options.themes;
-            // @ts-expect-error anyway
-            options.theme = themes[0];
-          } else if (themes.length === 2) {
-            // @ts-expect-error anyway
-            delete options.theme;
-            // @ts-expect-error anyway
-            options.themes = {
-              light: themes[0],
-              dark: themes[1],
-            };
-          } else {
-            throw new Error(`Only 1 or 2 themes are supported, got ${themes.length}`);
-          }
-          return code;
-        },
-      },
-      {
-        name: 'shiki:inline-decorations',
-        preprocess(code, options) {
-          const reg = /^\/\/ @decorations:(.*)\n/;
-          code = code.replace(reg, (match, decorations) => {
-            options.decorations ||= [];
-            options.decorations.push(...JSON.parse(decorations));
-            return '';
-          });
-          return code;
-        },
-      },
-      transformerTwoslash({
-        // errorRendering: 'hover',
-        processHoverInfo(info) {
-          return (
-            defaultHoverInfoProcessor(info)
-              // Remove shiki_core namespace
-              .replace(/_shikijs_core\w*\./g, '')
-          );
-        },
-      }),
-      transformerRemoveNotationEscape(),
-      transformerNotationDiff(),
-    ],
-  },
+  // markdown: {
+  //   codeTransformers: [
+  //     {
+  //       // Render custom themes with codeblocks
+  //       name: 'shiki:inline-theme',
+  //       preprocess(code, options) {
+  //         const reg = /\btheme:([\w,-]+)\b/;
+  //         const match = options.meta?.__raw?.match(reg);
+  //         if (!match?.[1]) return;
+  //         const theme = match[1];
+  //         const themes = theme.split(',').map((i) => i.trim());
+  //         if (!themes.length) return;
+  //         if (themes.length === 1) {
+  //           // @ts-expect-error anyway
+  //           delete options.themes;
+  //           // @ts-expect-error anyway
+  //           options.theme = themes[0];
+  //         } else if (themes.length === 2) {
+  //           // @ts-expect-error anyway
+  //           delete options.theme;
+  //           // @ts-expect-error anyway
+  //           options.themes = {
+  //             light: themes[0],
+  //             dark: themes[1],
+  //           };
+  //         } else {
+  //           throw new Error(`Only 1 or 2 themes are supported, got ${themes.length}`);
+  //         }
+  //         return code;
+  //       },
+  //     },
+  //     {
+  //       name: 'shiki:inline-decorations',
+  //       preprocess(code, options) {
+  //         const reg = /^\/\/ @decorations:(.*)\n/;
+  //         code = code.replace(reg, (match, decorations) => {
+  //           options.decorations ||= [];
+  //           options.decorations.push(...JSON.parse(decorations));
+  //           return '';
+  //         });
+  //         return code;
+  //       },
+  //     },
+  //     transformerTwoslash({
+  //       // errorRendering: 'hover',
+  //       processHoverInfo(info) {
+  //         return (
+  //           defaultHoverInfoProcessor(info)
+  //             // Remove shiki_core namespace
+  //             .replace(/_shikijs_core\w*\./g, '')
+  //         );
+  //       },
+  //     }),
+  //     transformerRemoveNotationEscape(),
+  //     transformerNotationDiff(),
+  //   ],
+  // },
 });

docs/.vitepress/locale.ts

@@ -70,10 +70,6 @@ export function getLocaleConfig(lang: string) {
           text: t('Bubble Menu'),
           link: `${urlPrefix}/guide/bubble-menu`,
         },
-        {
-          text: t('Customize'),
-          link: `${urlPrefix}/guide/customize.md`,
-        },
         {
           text: t('Internationalization'),
           link: `${urlPrefix}/guide/internationalization`,
@@ -85,8 +81,8 @@ export function getLocaleConfig(lang: string) {
       items: [
 
         {
-          text: 'BaseKit',
-          link: '/extensions/BaseKit/index.md',
+          text: 'Attachment',
+          link: '/extensions/Attachment/index.md',
         },
         {
           text: 'Blockquote',
@@ -112,13 +108,17 @@ export function getLocaleConfig(lang: string) {
           text: 'CodeBlock',
           link: '/extensions/CodeBlock/index.md',
         },
+        {
+          text: 'CodeView',
+          link: '/extensions/CodeView/index.md',
+        },
         {
           text: 'Color',
           link: '/extensions/Color/index.md',
         },
         {
-          text: 'Document',
-          link: '/extensions/Document/index.md',
+          text: 'Column',
+          link: '/extensions/Column/index.md',
         },
         {
           text: 'FontFamily',
@@ -288,10 +288,7 @@ export function getLocaleConfig(lang: string) {
           text: 'Twitter',
           link: '/extensions/Twitter/index.md',
         },
-        {
-          text: 'Drawer',
-          link: '/extensions/Drawer/index.md',
-        },
+
       ],
     },
   ];

docs/.vitepress/theme/index.ts

@@ -1,9 +1,9 @@
 import Theme from 'vitepress/theme'
-import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
+// import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import type { EnhanceAppContext } from 'vitepress'
 import './style.css'
 // import '@nolebase/vitepress-plugin-git-changelog/client/style.css'
-import '@shikijs/vitepress-twoslash/style.css'
+// import '@shikijs/vitepress-twoslash/style.css'
 import Contributors from '../components/Contributors.vue'
 import Changelog from '../components/Changelog.vue'
 import Layout from './Layout.vue'
@@ -16,6 +16,6 @@ export default {
     app.component('Contributors', Contributors)
     app.component('Changelog', Changelog)
 
-    app.use(TwoslashFloatingVue)
+    // app.use(TwoslashFloatingVue)
   },
 }

docs/extensions/Attachment/index.md

@@ -12,16 +12,75 @@ Attachment is a node extension that allows you to add an Attachment to your edit
 
 ## Usage
 
+
 ```tsx
-import { Attachment } from 'reactjs-tiptap-editor/attachment'; // [!code ++]
+import { RichTextProvider } from 'reactjs-tiptap-editor'
+
+// Base Kit
+import { Document } from '@tiptap/extension-document'
+import { Text } from '@tiptap/extension-text'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
+import { HardBreak } from '@tiptap/extension-hard-break'
+import { TextStyle } from '@tiptap/extension-text-style';
+import { ListItem } from '@tiptap/extension-list';
+
+// Extension
+import { Attachment, RichTextAttachment } from 'reactjs-tiptap-editor/attachment'; // [!code ++]
+// ... other extensions
+
+
+// Import CSS
+import 'reactjs-tiptap-editor/style.css';
 
 const extensions = [
-  ...,
+  // Base Extensions
+  Document,
+  Text,
+  Dropcursor,
+  Gapcursor,
+  HardBreak,
+  Paragraph,
+  TrailingNode,
+  ListItem,
+  TextStyle,
+  Placeholder.configure({
+    placeholder: 'Press \'/\' for commands',
+  })
+
+  ...
   // Import Extensions Here
   Attachment.configure({// [!code ++]
     upload: (file: any) => {// [!code ++]
       // upload file to server return url
     },// [!code ++]
   }),// [!code ++]
 ];
+
+const RichTextToolbar = () => {
+  return (
+    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
+      <RichTextAttachment /> {/* [!code ++] */}
+    </div>
+  )
+}
+
+const App = () => {
+   const editor = useEditor({
+    textDirection: 'auto', // global text direction
+    extensions,
+  });
+
+  return (
+    <RichTextProvider
+      editor={editor}
+    >
+      <RichTextToolbar />
+
+      <EditorContent
+        editor={editor}
+      />
+    </RichTextProvider>
+  );
+};
 ```

docs/extensions/BaseKit/index.md

@@ -14,21 +14,71 @@ The Blockquote extension allows you to add blockquotes to your editor.
 
 ## Usage
 
+
 ```tsx
-import { Blockquote } from 'reactjs-tiptap-editor/blockquote'; // [!code ++]
+import { RichTextProvider } from 'reactjs-tiptap-editor'
+
+// Base Kit
+import { Document } from '@tiptap/extension-document'
+import { Text } from '@tiptap/extension-text'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
+import { HardBreak } from '@tiptap/extension-hard-break'
+import { TextStyle } from '@tiptap/extension-text-style';
+import { ListItem } from '@tiptap/extension-list';
+
+// Extension
+import { Blockquote, RichTextBlockquote } from 'reactjs-tiptap-editor/blockquote'; // [!code ++]
+// ... other extensions
+
+
+// Import CSS
+import 'reactjs-tiptap-editor/style.css';
 
 const extensions = [
-  ...,
+  // Base Extensions
+  Document,
+  Text,
+  Dropcursor,
+  Gapcursor,
+  HardBreak,
+  Paragraph,
+  TrailingNode,
+  ListItem,
+  TextStyle,
+  Placeholder.configure({
+    placeholder: 'Press \'/\' for commands',
+  })
+
+  ...
   // Import Extensions Here
-  Blockquote // [!code ++]
+  Blockquote// [!code ++]
 ];
-```
 
-## Options
+const RichTextToolbar = () => {
+  return (
+    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
+      <RichTextBlockquote /> {/* [!code ++] */}
+    </div>
+  )
+}
 
-### shortcutKeys
+const App = () => {
+   const editor = useEditor({
+    textDirection: 'auto', // global text direction
+    extensions,
+  });
 
-Type: `string[]`\
-Default: `['shift', 'mod', 'B']`
+  return (
+    <RichTextProvider
+      editor={editor}
+    >
+      <RichTextToolbar />
 
-Keyboard shortcuts for the extension.
+      <EditorContent
+        editor={editor}
+      />
+    </RichTextProvider>
+  );
+};
+```