reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

package/src/plugins/image-upload.ts

@@ -0,0 +1,160 @@
+import type { EditorState } from '@tiptap/pm/state';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import type { EditorView } from '@tiptap/pm/view';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+
+const uploadKey = new PluginKey('upload-image');
+
+interface UploadAction {
+  add?: Array<{ id: string, pos: number, src: string }>
+  remove?: string[]
+}
+
+export function UploadImagesPlugin() {
+  return new Plugin({
+    key: uploadKey,
+    state: {
+      init() {
+        return DecorationSet.empty;
+      },
+      apply(tr: any, set: any) {
+        set = set.map(tr.mapping, tr.doc);
+        const action = tr.getMeta(uploadKey) as UploadAction;
+
+        if (action?.add) {
+          for (const { id, pos, src } of action.add) {
+            const placeholder = createPlaceholder(src);
+            const deco = Decoration.widget(pos, placeholder, { id });
+            set = set.add(tr.doc, [deco]);
+          }
+        } else if (action?.remove) {
+          for (const id of action.remove) {
+            set = set.remove(set.find(undefined, undefined, (spec: any) => spec.id === id));
+          }
+        }
+
+        return set;
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state);
+      },
+    },
+  });
+}
+
+function createPlaceholder(src: string): HTMLElement {
+  const placeholder = document.createElement('div');
+  const image = document.createElement('img');
+  image.setAttribute('class', 'opacity-50');
+  image.src = src;
+  image.addEventListener('load', () => {
+    placeholder.setAttribute('class', 'img-placeholder');
+  });
+  placeholder.append(image);
+  return placeholder;
+}
+
+function findPlaceholder(state: EditorState, id: string): number | null {
+  const decos = uploadKey.getState(state) as DecorationSet;
+  const found = decos.find(undefined, undefined, spec => spec.id === id);
+  return found.length > 0 ? found[0]?.from : null;
+}
+
+export interface ImageUploadOptions {
+  validateFn?: (file: File) => boolean
+  onUpload: (file: File) => Promise<string | object>
+  postUpload?: (src: string) => Promise<string>
+  defaultInline?: boolean
+}
+
+export type UploadFn = (files: File[], view: EditorView, pos: number) => void;
+
+export function createImageUpload({ validateFn, onUpload, postUpload, defaultInline = false }: ImageUploadOptions): UploadFn {
+  return (files, view, pos) => {
+    for (const file of files) {
+      if (validateFn && !validateFn(file)) {
+        continue;
+      }
+
+      const id = Date.now().toString();
+      const tr = view.state.tr;
+      if (!tr.selection.empty) {
+        tr.deleteSelection();
+      }
+
+      const result = URL.createObjectURL(file);
+      tr.setMeta(uploadKey, {
+        add: [{ id, pos, src: result }],
+      });
+      view.dispatch(tr);
+
+      onUpload(file).then(
+        async (src) => {
+          if (postUpload && typeof src === 'string') {
+            src = await postUpload(src);
+          }
+
+          const { schema } = view.state;
+          let placeholderPos = findPlaceholder(view.state, id);
+          if (placeholderPos === null) {
+            return;
+          }
+
+          const imageSrc = typeof src === 'object' ? result : src;
+          const node = schema.nodes.image?.create({
+            src: imageSrc,
+            inline: defaultInline
+          });
+          if (!node) {
+            return;
+          }
+
+          // check position larger than doc.content.size
+          const { doc } = view.state;
+          if (placeholderPos > doc.content.size) {
+            placeholderPos = doc.content.size - 1;
+          }
+
+          const transaction = view.state.tr
+            .replaceWith(placeholderPos, placeholderPos, node)
+            .setMeta(uploadKey, { remove: [id] });
+
+          view.dispatch(transaction);
+        },
+        () => {
+          const transaction = view.state.tr.delete(pos, pos).setMeta(uploadKey, { remove: [id] });
+          view.dispatch(transaction);
+        },
+      );
+    }
+  };
+}
+
+export function handleImagePaste(view: EditorView, event: ClipboardEvent, uploadFn: UploadFn): boolean {
+  const files = [...(event.clipboardData?.files || [])];
+  if (files.length > 0) {
+    event.preventDefault();
+    const pos = view.state.selection.from;
+    uploadFn(files, view, pos + 1);
+    return true;
+  }
+  return false;
+}
+
+export function handleImageDrop(view: EditorView, event: DragEvent, moved: boolean, uploadFn: UploadFn): boolean {
+  const files = [...(event.dataTransfer?.files || [])];
+  if (!moved && files.length > 0) {
+    event.preventDefault();
+    const coordinates = view.posAtCoords({
+      left: event.clientX,
+      top: event.clientY,
+    });
+    if (coordinates) {
+      uploadFn(files, view, coordinates.pos + 1);
+      return true;
+    }
+  }
+  return false;
+}

package/src/store/ProviderRichText.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable react/display-name */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { memo, useEffect } from 'react';
+
+import { ProviderEditableEditor, ProviderTheme, useStoreEditableEditor, useStoreTheme } from '@/store/store';
+import { listenEvent } from '@/utils/customEvents/customEvents';
+import { EVENTS } from '@/utils/customEvents/events.constant';
+
+const EventInitial = memo(({ children, id }: any) => {
+  const [, setEditable] = useStoreEditableEditor(store => store.value);
+  const [, setTheme] = useStoreTheme(store => store.value);
+
+  const handleEditable = (evt: any) => {
+    setEditable({
+      value: evt.detail
+    });
+  };
+
+  const handleTheme = (evt: any) => {
+    setTheme({
+      value: evt.detail
+    });
+  };
+
+  useEffect(() => {
+    const rm3 = listenEvent(EVENTS.EDIT(id), handleEditable);
+    const rm4 = listenEvent(EVENTS.UPDATE_THEME(id), handleTheme);
+
+    return () => {
+      rm3();
+      rm4();
+    };
+  }, []);
+
+  return (
+    <>
+      {children}
+    </>
+  );
+});
+
+export function ProviderRichText ({ children, id }: { children: React.ReactNode; id: any }) {
+
+  return (
+    <ProviderEditableEditor>
+      <ProviderTheme>
+        <EventInitial id={id}>
+          {children}
+        </EventInitial>
+      </ProviderTheme>
+    </ProviderEditableEditor>
+  );
+}

package/src/store/editableEditor.ts

@@ -0,0 +1,15 @@
+import { useStoreEditableEditor } from '@/store/store';
+import { dispatchEvent } from '@/utils/customEvents/customEvents';
+import { EVENTS } from '@/utils/customEvents/events.constant';
+
+export function useEditableEditor() {
+  const [v] = useStoreEditableEditor(store => store.value);
+
+  return v;
+}
+
+export const editableEditorActions = {
+  setDisable: (id: any, disable: boolean) => {
+    dispatchEvent(EVENTS.EDIT(id), disable);
+  },
+};

package/src/store/fast-context.tsx

@@ -0,0 +1,70 @@
+import React, {
+  useRef,
+  createContext,
+  useContext,
+  useCallback,
+  useSyncExternalStore,
+} from 'react';
+
+export default function createFastContext<Store>(initialState: Store) {
+  function useStoreData(): {
+    get: () => Store;
+    set: (value: Partial<Store>) => void;
+    subscribe: (callback: () => void) => () => void; } {
+    const store = useRef(initialState);
+
+    const get = useCallback(() => store.current, []);
+
+    const subscribers = useRef(new Set<() => void>());
+
+    const set = useCallback((value: Partial<Store>) => {
+      store.current = { ...store.current, ...value };
+      subscribers.current.forEach((callback) => callback());
+    }, []);
+
+    const subscribe = useCallback((callback: () => void) => {
+      subscribers.current.add(callback);
+      return () => subscribers.current.delete(callback);
+    }, []);
+
+    return {
+      get,
+      set,
+      subscribe,
+    };
+  }
+
+  type UseStoreDataReturnType = ReturnType<typeof useStoreData>;
+
+  const StoreContext = createContext<UseStoreDataReturnType | null>(null);
+
+  function Provider({ children }: { children: React.ReactNode }) {
+    return (
+      <StoreContext.Provider value={useStoreData()}>
+        {children}
+      </StoreContext.Provider>
+    );
+  }
+
+  function useStore<SelectorOutput>(
+    selector: (store: Store) => SelectorOutput
+  ): [SelectorOutput, (value: Partial<Store>) => void] {
+    const store = useContext(StoreContext);
+    if (!store) {
+      throw new Error('Store not found');
+    }
+
+    const state = useSyncExternalStore(
+      store.subscribe,
+      () => selector(store.get()),
+      () => selector(initialState),
+    );
+
+    return [state, store.set];
+  }
+
+  return {
+    Provider,
+    useStore,
+  };
+}

package/src/store/store.ts

@@ -0,0 +1,35 @@
+import { createSignal } from 'reactjs-signal';
+
+import createFastContext from '@/store/fast-context';
+
+const { Provider: ProviderUploadImage, useStore: useStoreUploadImage } = createFastContext({
+  value: false
+});
+
+const { Provider: ProviderUploadVideo, useStore: useStoreUploadVideo } = createFastContext({
+  value: false
+});
+
+const { Provider: ProviderEditableEditor, useStore: useStoreEditableEditor } = createFastContext({
+  value: false
+});
+
+const { Provider: ProviderTheme, useStore: useStoreTheme } = createFastContext({
+  value: 'light'
+});
+
+export const atomID = createSignal('0');
+
+export {
+  ProviderUploadImage,
+  useStoreUploadImage,
+
+  ProviderUploadVideo,
+  useStoreUploadVideo,
+
+  ProviderEditableEditor,
+  useStoreEditableEditor,
+
+  ProviderTheme,
+  useStoreTheme,
+};

package/src/styles/ProseMirror.scss

@@ -0,0 +1,176 @@
+.ProseMirror {
+  /* Typography */
+  p {
+    @apply leading-relaxed mb-1.5 first:mt-0 last:mb-0;
+  }
+
+  & > p {
+    @apply mb-1.5 first:mt-0 last:mb-0;
+  }
+
+  h1 {
+    @apply text-3xl;
+  }
+
+  h2 {
+    @apply text-2xl;
+  }
+
+  h3 {
+    @apply text-xl;
+  }
+
+  h4 {
+    @apply text-lg;
+  }
+
+  h5 {
+    @apply text-base;
+  }
+
+  h6 {
+    @apply text-sm;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-bold first:mt-0 last:mb-0;
+  }
+
+  h1,
+  h2,
+  h3 {
+    @apply mt-12;
+  }
+
+  h4,
+  h5,
+  h6 {
+    @apply mt-8;
+  }
+
+  a.link {
+    @apply text-blue-500 font-extrabold dark:text-blue-400;
+  }
+
+  mark {
+    @apply bg-red-500 rounded-sm decoration-clone text-inherit py-1 px-0 dark:bg-red-400;
+  }
+
+  & img {
+    @apply h-auto max-w-full;
+  }
+
+  @for $i from 1 through 7 /* max-indent */ {
+    $indent-margin-base: 2em;
+
+    *[data-indent='#{$i}'] {
+      text-indent: $indent-margin-base * $i !important;
+    }
+  }
+  iframe {
+    @apply border !important;
+    @apply w-full border-border mt-2 rounded-sm h-[400px];
+  }
+
+  [data-type='horizontalRule'] {
+    @apply my-8 py-4;
+
+    hr {
+      @apply border-0 border-t border-black/20 bg-black/80;
+      @apply dark:border-white/20 dark:bg-white/80;
+    }
+  }
+  /* Block Quote */
+  .blockquote {
+    @apply border-l-4 text-black border-l-neutral-700 py-2 px-4 bg-opacity-80 rounded-lg rounded-tl-none rounded-bl-none;
+    @apply dark:border-l-neutral-300 dark:text-white;
+  }
+
+  code {
+    @apply caret-white text-white bg-neutral-900 rounded-sm shadow-lg font-mono;
+
+    &::selection {
+      @apply bg-white/30;
+    }
+  }
+
+  pre {
+    @apply caret-white bg-neutral-700 text-white rounded my-12 p-4 !border border-black dark:bg-neutral-900 dark:border-neutral-800;
+
+    *::selection {
+      @apply bg-white/20;
+    }
+
+    code {
+      @apply bg-inherit text-inherit p-0 shadow-none;
+    }
+  }
+  /* List */
+  ol {
+    @apply list-decimal;
+  }
+
+  ul {
+    @apply list-disc;
+  }
+
+  ul,
+  ol {
+    @apply py-0 px-8 my-6 first:mt-0 last:mb-0;
+
+    ul,
+    ol,
+    li {
+      @apply my-1;
+    }
+
+    p {
+      @apply mt-0 mb-1;
+    }
+  }
+
+  & > ul,
+  & > ol {
+    @apply my-8 first:mt-0 last:mb-0;
+  }
+
+  ul[data-type='taskList'] {
+    @apply list-none p-0;
+
+    p {
+      @apply m-0;
+    }
+
+    li {
+      @apply flex;
+
+      > label {
+        @apply grow-0 shrink-0 flex-auto inline mr-2 select-none;
+      }
+
+      > div {
+        @apply flex-auto;
+      }
+
+      &[data-checked='true'] {
+        @apply line-through;
+      }
+    }
+  }
+}
+
+.ProseMirror {
+  .search-result {
+    background: #c4eed0;
+  }
+
+  .search-result-current {
+    background: #6cd58b;
+  }
+}
+

package/src/styles/columns.scss

@@ -0,0 +1,23 @@
+.columns {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+  margin-top: 0.75em;
+
+  .column {
+    min-width: 0;
+    padding: 12px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: hsl(var(--border));
+    border-radius: 2px;
+    flex: 1 1 0%;
+    box-sizing: border-box;
+
+    p {
+      &:first-of-type {
+        margin-top: 0;
+      }
+    }
+  }
+}