reactjs-tiptap-editor-pro 0.2.28 → 0.2.30

package/src/extensions/MultiColumn/MultiColumn.ts

@@ -0,0 +1,111 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+import { TextSelection } from '@tiptap/pm/state';
+import { addOrDeleteCol, createColumns, gotoCol } from '@/utils/columns';
+
+export const EXTENSION_PRIORITY_HIGHEST = 200;
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    columns: {
+      insertColumns: (attrs?: { cols: number }) => ReturnType
+      addColBefore: () => ReturnType
+      addColAfter: () => ReturnType
+      deleteCol: () => ReturnType
+    }
+  }
+}
+
+export const MultiColumn = Node.create({
+  name: 'columns',
+  group: 'block',
+  defining: true,
+  isolating: true,
+  allowGapCursor: false,
+  content: 'column{1,}',
+  priority: EXTENSION_PRIORITY_HIGHEST,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: 'columns',
+      },
+    };
+  },
+
+  addAttributes() {
+    return {
+      cols: {
+        default: 2,
+        parseHTML: element => element.getAttribute('cols'),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[class=grid]',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      insertColumns:
+        attrs =>
+          ({ tr, dispatch, editor }) => {
+            const node = createColumns(editor.schema, (attrs && attrs.cols) || 3);
+
+            if (dispatch) {
+              const offset = tr.selection.anchor + 1;
+
+              tr.replaceSelectionWith(node)
+                .scrollIntoView()
+                .setSelection(TextSelection.near(tr.doc.resolve(offset)));
+            }
+
+            return true;
+          },
+      addColBefore:
+        () =>
+          ({ dispatch, state }) => {
+            return addOrDeleteCol({ dispatch, state, type: 'addBefore' });
+          },
+      addColAfter:
+        () =>
+          ({ dispatch, state }) => {
+            return addOrDeleteCol({ dispatch, state, type: 'addAfter' });
+          },
+      deleteCol:
+        () =>
+          ({ dispatch, state }) => {
+            return addOrDeleteCol({ dispatch, state, type: 'delete' });
+          },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-Alt-G': () => this.editor.commands.insertColumns(),
+      'Tab': () => {
+        return gotoCol({
+          state: this.editor.state,
+          dispatch: this.editor.view.dispatch,
+          type: 'after',
+        });
+      },
+      'Shift-Tab': () => {
+        return gotoCol({
+          state: this.editor.state,
+          dispatch: this.editor.view.dispatch,
+          type: 'before',
+        });
+      },
+    };
+  },
+});

package/src/extensions/MultiColumn/components/ColumnActionButton.ts

@@ -0,0 +1,22 @@
+import { Extension } from '@tiptap/core';
+
+import { ActionButton } from '@/components';
+
+export const ColumnActionButton = Extension.create<any>({
+  name: 'columnActionButton',
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      button: ({ editor, t }: any) => ({
+        component: ActionButton,
+        componentProps: {
+          action: () => {
+            editor.chain().focus().insertColumns({ cols: 2 }).run();
+          },
+          icon: 'Columns',
+          tooltip: t('editor.columns.tooltip'),
+        },
+      }),
+    };
+  },
+});

package/src/extensions/MultiColumn/index.ts

@@ -0,0 +1,3 @@
+export * from './MultiColumn';
+export * from './Column';
+export * from './components/ColumnActionButton';

package/src/extensions/OrderedList/OrderedList.ts

@@ -0,0 +1,28 @@
+import type { OrderedListOptions as TiptapOrderedListOptions } from '@tiptap/extension-ordered-list';
+import { OrderedList as TiptapOrderedList } from '@tiptap/extension-ordered-list';
+
+import { ActionButton } from '@/components';
+import type { GeneralOptions } from '@/types';
+
+export interface OrderedListOptions
+  extends TiptapOrderedListOptions,
+  GeneralOptions<OrderedListOptions> {}
+
+export const OrderedList = TiptapOrderedList.extend<OrderedListOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      button: ({ editor, t }) => ({
+        component: ActionButton,
+        componentProps: {
+          action: () => editor.commands.toggleOrderedList(),
+          isActive: () => editor.isActive('orderedList') || false,
+          disabled: false,
+          icon: 'ListOrdered',
+          shortcutKeys: ['mod', 'shift', '7'],
+          tooltip: t('editor.orderedlist.tooltip'),
+        },
+      }),
+    };
+  },
+});

package/src/extensions/OrderedList/index.ts

@@ -0,0 +1 @@
+export * from './OrderedList';

package/src/extensions/SearchAndReplace/SearchAndReplace.ts

@@ -0,0 +1,395 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/no-this-alias */
+import { Extension } from '@tiptap/core';
+import type { EditorState } from '@tiptap/pm/state';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import scrollIntoView from 'scroll-into-view-if-needed';
+
+import SearchAndReplaceButton from '@/extensions/SearchAndReplace/components/SearchAndReplaceButton';
+import type { GeneralOptions } from '@/types';
+import { dispatchEvent } from '@/utils/customEvents/customEvents';
+import { EVENTS } from '@/utils/customEvents/events.constant';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    search: {
+      setSearchTerm: (searchTerm: string) => ReturnType
+      setReplaceTerm: (replaceTerm: string) => ReturnType
+      replace: () => ReturnType
+      replaceAll: () => ReturnType
+      goToPrevSearchResult: () => void
+      goToNextSearchResult: () => void
+      setCaseSensitive: (caseSensitive: boolean) => ReturnType
+    }
+  }
+}
+
+interface Result {
+  from: number
+  to: number
+}
+
+interface TextNodesWithPosition {
+  text: string
+  pos: number
+}
+
+const updateView = (state: EditorState, dispatch: any) => dispatch(state.tr);
+
+function regex(s: string, disableRegex: boolean, caseSensitive: boolean): RegExp {
+  return RegExp(disableRegex ? s.replace(/[$()*+./?[\\\]^{|}-]/g, String.raw`\$&`) : s, caseSensitive ? 'gu' : 'gui');
+}
+
+function processSearches(
+  doc: any,
+  searchTerm: RegExp,
+  searchResultClass: string,
+): { decorationsToReturn: any[], results: Result[] } {
+  const decorations: Decoration[] = [];
+  let textNodesWithPosition: TextNodesWithPosition[] = [];
+  const results: Result[] = [];
+
+  let index = 0;
+
+  if (!searchTerm)
+    return { decorationsToReturn: [], results: [] };
+
+  doc?.descendants((node: any, pos: any) => {
+    if (node.isText) {
+      if (textNodesWithPosition[index]) {
+        textNodesWithPosition[index] = {
+          text: textNodesWithPosition[index].text + node.text,
+          pos: textNodesWithPosition[index].pos,
+        };
+      } else {
+        textNodesWithPosition[index] = {
+          text: `${node.text}`,
+          pos,
+        };
+      }
+    } else {
+      index += 1;
+    }
+  });
+
+  textNodesWithPosition = textNodesWithPosition.filter(Boolean);
+
+  for (const { text, pos } of textNodesWithPosition) {
+
+    const matches = [...text.matchAll(searchTerm)];
+
+    for (const m of matches) {
+
+      if (m[0] === '')
+        break;
+
+      if (m.index !== undefined) {
+        results.push({
+          from: pos + m.index,
+          to: pos + m.index + m[0].length,
+        });
+      }
+    }
+  }
+
+  for (const r of results) {
+    decorations.push(Decoration.inline(r.from, r.to, { class: searchResultClass }));
+  }
+
+  return {
+    decorationsToReturn: decorations,
+    results,
+  };
+}
+
+function replace(replaceTerm: string, results: Result[], { state, dispatch }: any) {
+  const firstResult = results[0];
+
+  if (!firstResult)
+    return;
+
+  const { from, to } = results[0];
+
+  if (dispatch)
+    dispatch(state.tr.insertText(replaceTerm, from, to));
+}
+
+function rebaseNextResult(replaceTerm: string, index: number, lastOffset: number, results: Result[]): [number, Result[]] | null {
+  const nextIndex = index + 1;
+
+  if (!results[nextIndex])
+    return null;
+
+  const { from: currentFrom, to: currentTo } = results[index];
+
+  const offset = currentTo - currentFrom - replaceTerm.length + lastOffset;
+
+  const { from, to } = results[nextIndex];
+
+  results[nextIndex] = {
+    to: to - offset,
+    from: from - offset,
+  };
+
+  return [offset, results];
+}
+
+function replaceAll(replaceTerm: string, results: Result[], { tr, dispatch }: any) {
+  let offset = 0;
+
+  let ourResults = results.slice();
+
+  if (ourResults.length === 0)
+    return false;
+
+  for (let i = 0; i < ourResults.length; i += 1) {
+    const { from, to } = ourResults[i];
+
+    tr.insertText(replaceTerm, from, to);
+
+    const rebaseNextResultResponse = rebaseNextResult(replaceTerm, i, offset, ourResults);
+
+    if (rebaseNextResultResponse) {
+      offset = rebaseNextResultResponse[0];
+      ourResults = rebaseNextResultResponse[1];
+    }
+  }
+
+  dispatch(tr);
+
+  return true;
+}
+
+function gotoSearchResult({ view, tr, searchResults, searchResultCurrentClass, gotoIndex }: any) {
+  const result = searchResults[gotoIndex];
+
+  if (result) {
+    const transaction = tr.setMeta('directDecoration', {
+      fromPos: result.from,
+      toPos: result.to,
+      attrs: { class: searchResultCurrentClass },
+    });
+    view?.dispatch(transaction);
+
+    setTimeout(() => {
+      const el = window.document.querySelector(`.${searchResultCurrentClass}`);
+      if (el) {
+        scrollIntoView(el, { behavior: 'smooth', scrollMode: 'if-needed' });
+      }
+    }, 0);
+
+    return true;
+  }
+
+  return false;
+}
+
+interface SearchOptions extends GeneralOptions<SearchOptions> {
+  searchTerm: string
+  replaceTerm: string
+  searchResultClass: string
+  searchResultCurrentClass: string
+  caseSensitive: boolean
+  disableRegex: boolean
+  onChange?: () => void
+}
+
+interface SearchStorage {
+  results: Result[]
+  currentIndex: number
+}
+
+export const SearchAndReplace = Extension.create<SearchOptions, SearchStorage>({
+  name: 'search',
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      searchTerm: '',
+      replaceTerm: '',
+      results: [],
+      currentIndex: 0,
+      searchResultClass: 'search-result',
+      searchResultCurrentClass: 'search-result-current',
+      caseSensitive: false,
+      disableRegex: false,
+      onChange: () => {
+        return;
+      },
+      button: ({ editor, t }: any) => ({
+        component: SearchAndReplaceButton,
+        componentProps: {
+          action: () => {
+            return;
+          },
+          icon: 'SearchAndReplace',
+          tooltip: t('editor.searchAndReplace.tooltip'),
+          isActive: () => false,
+          disabled: false,
+          editor,
+        },
+      }),
+    };
+  },
+
+  addStorage() {
+    return {
+      results: [],
+      currentIndex: -1,
+    };
+  },
+
+  addCommands() {
+    return {
+      setSearchTerm:
+        (searchTerm: string) =>
+          ({ state, dispatch }) => {
+            this.options.searchTerm = searchTerm;
+            this.storage.results = [];
+            this.storage.currentIndex = 0;
+            dispatchEvent(EVENTS.SEARCH_REPLCE);
+            updateView(state, dispatch);
+            return false;
+          },
+      setReplaceTerm:
+        (replaceTerm: string) =>
+          ({ state, dispatch }) => {
+            this.options.replaceTerm = replaceTerm;
+
+            updateView(state, dispatch);
+
+            return false;
+          },
+      setCaseSensitive: (caseSensitive: boolean) => ({ state, dispatch }) => {
+        this.options.caseSensitive = caseSensitive;
+        updateView(state, dispatch);
+        return false;
+      },
+      replace:
+        () =>
+          ({ state, dispatch }) => {
+            const { replaceTerm } = this.options;
+            const { currentIndex, results } = this.storage;
+            const currentResult = results[currentIndex];
+
+            if (currentResult) {
+              replace(replaceTerm, [currentResult], { state, dispatch });
+              this.storage.results.splice(currentIndex, 1);
+            } else {
+              replace(replaceTerm, results, { state, dispatch });
+              this.storage.results.shift();
+            }
+
+            dispatchEvent(EVENTS.SEARCH_REPLCE);
+
+            updateView(state, dispatch);
+
+            return false;
+          },
+      replaceAll:
+        () =>
+          ({ state, tr, dispatch }) => {
+            const { replaceTerm } = this.options;
+            const { results } = this.storage;
+
+            replaceAll(replaceTerm, results, { tr, dispatch });
+
+            this.storage.currentIndex = -1;
+            this.storage.results = [];
+            dispatchEvent(EVENTS.SEARCH_REPLCE);
+
+            updateView(state, dispatch);
+
+            return false;
+          },
+      goToPrevSearchResult:
+        () =>
+          ({ view, tr }: any) => {
+            const { searchResultCurrentClass } = this.options;
+            const { currentIndex, results } = this.storage;
+            const nextIndex = (currentIndex + results.length - 1) % results.length;
+            this.storage.currentIndex = nextIndex;
+            dispatchEvent(EVENTS.SEARCH_REPLCE);
+
+            return gotoSearchResult({
+              view,
+              tr,
+              searchResults: results,
+              searchResultCurrentClass,
+              gotoIndex: nextIndex,
+            });
+          },
+      goToNextSearchResult:
+        () =>
+          ({ view, tr }: any) => {
+            const { searchResultCurrentClass } = this.options;
+            const { currentIndex, results } = this.storage;
+            const nextIndex = (currentIndex + 1) % results.length;
+            this.storage.currentIndex = nextIndex;
+            this.options.onChange && this.options.onChange();
+            dispatchEvent(EVENTS.SEARCH_REPLCE);
+
+            return gotoSearchResult({
+              view,
+              tr,
+              searchResults: results,
+              searchResultCurrentClass,
+              gotoIndex: nextIndex,
+            });
+          },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const extensionThis = this;
+
+    return [
+      new Plugin({
+        key: new PluginKey('search'),
+        state: {
+          init() {
+            return DecorationSet.empty;
+          },
+          apply(ctx) {
+            const { doc, docChanged } = ctx;
+
+            const { searchTerm, searchResultClass, searchResultCurrentClass, disableRegex, caseSensitive }
+              = extensionThis.options;
+
+            if (docChanged || searchTerm) {
+              const { decorationsToReturn, results } = processSearches(
+                doc,
+                regex(searchTerm, disableRegex, caseSensitive),
+                searchResultClass,
+              );
+              extensionThis.storage.results = results;
+              if (extensionThis.storage.currentIndex > results.length - 1) {
+                extensionThis.storage.currentIndex = 0;
+              }
+              dispatchEvent(EVENTS.SEARCH_REPLCE);
+              if (ctx.getMeta('directDecoration')) {
+                const { fromPos, toPos, attrs } = ctx.getMeta('directDecoration');
+                decorationsToReturn.push(Decoration.inline(fromPos, toPos, attrs));
+              } else {
+                if (results.length > 0) {
+                  decorationsToReturn[0] = Decoration.inline(results[0].from, results[0].to, {
+                    class: searchResultCurrentClass,
+                  });
+                }
+              }
+
+              return DecorationSet.create(doc, decorationsToReturn);
+            }
+            return DecorationSet.empty;
+          },
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state);
+          },
+        },
+      }),
+    ];
+  },
+});