feat: add support for text highlight, link and image (#8)

* chore: update BarMenu styling to increase gap between items

* chore: update CSS for formats

* feat: add new icons for horizontal line, italic, inline code, code block, ordered list, unordered list, and block quote

* chore: update @tiptap dependencies to version 2.4.0

* chore: Update @tiptap dependencies to version 2.4.0

* chore: Update Focus.configure in BlockEditor extension to include className option

* chore: Add workaround to make the editor autofocus in BlockEditor component

* chore: Update BlockEditor to autofocus on load

* chore: Add Highlight extension

* chore: Update link extension in BlockEditor

* chore: Update BlockEditor to use lazy loading for images

* chore: Update link extension in BlockEditor

* feat: add support for image

lib/components/BlockEditor/extension/extension-link.ts

@@ -0,0 +1,20 @@
+import Link from '@tiptap/extension-link';
+
+export default Link.extend({
+  inclusive: false,
+  addOptions() {
+    return {
+      openOnClick: false,
+      linkOnPaste: true,
+      autolink: true,
+      protocols: [],
+      defaultProtocol: 'http',
+      HTMLAttributes: {
+        target: '_blank',
+        rel: 'noopener noreferrer nofollow',
+        class: null,
+      },
+      validate: (url) => !!url,
+    };
+  },
+});

lib/components/BlockEditor/extension/extension-selectedText.ts

@@ -0,0 +1,28 @@
+import { Editor, Extension } from '@tiptap/core';
+
+declare module '@tiptap/core' {
+  interface Commands {
+    selectedText: {
+      getSelectedText: () => ({ editor }: { editor: Editor }) => string | null;
+    };
+  }
+}
+
+export default Extension.create({
+  name: 'SelectedText',
+  addCommands: () => {
+    return {
+      getSelectedText:
+        () =>
+        ({ editor }) => {
+          const { from, to, empty } = editor.state.selection;
+
+          if (empty) {
+            return null;
+          }
+
+          return editor.state.doc.textBetween(from, to, ' ');
+        },
+    };
+  },
+});

lib/components/BlockEditor/extension/index.ts

@@ -1,12 +1,21 @@
 import Placeholder from '@tiptap/extension-placeholder';
 import StarterKit from '@tiptap/starter-kit';
-import { Focus } from './focus';
 import { SlashCommand } from './slashCommand';
 import { getSuggestionItems } from './slashCommand/items';
 import renderItems from './slashCommand/renderItems';
+import Focus from '@tiptap/extension-focus';
+import Highlight from '@tiptap/extension-highlight';
+import SelectedText from './extension-selectedText';
+import Link from './extension-link';
+import Image from '@tiptap/extension-image';
 
 export const extensions = [
-  StarterKit,
+  StarterKit.configure({
+    dropcursor: {
+      width: 4,
+      color: '#ebf6fe',
+    },
+  }),
   Placeholder.configure({
     showOnlyWhenEditable: true,
     includeChildren: true,
@@ -24,11 +33,21 @@ export const extensions = [
       return 'Type "/" for commands...';
     },
   }),
-  Focus.configure({ mode: 'deepest' }),
+  Focus.configure({ mode: 'deepest', className: 'has-focus' }),
   SlashCommand.configure({
     slashSuggestion: {
       items: getSuggestionItems,
       render: renderItems,
     },
   }),
+  Highlight,
+  SelectedText,
+  Link,
+  Image.configure({
+    inline: true,
+    HTMLAttributes: {
+      class: 'block-editor-image-node',
+    },
+    allowBase64: true,
+  }),
 ];

lib/components/BlockEditor/index.tsx

@@ -39,6 +39,8 @@ export const BlockEditor: FC<BlockEditorProps> = ({
     editorProps: {
       attributes: {
         class: 'block-editor',
+        // this is a workaround to make the editor autofocus
+        ...(autoFocus ? { autofocus: 'true' } : {}),
       },
       ...editorProps,
     },