reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

package/src/plugins/image-upload.ts

@@ -1,160 +0,0 @@
-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

@@ -1,53 +0,0 @@
-/* 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

@@ -1,15 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,176 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-.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;
-      }
-    }
-  }
-}