reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

package/src/extensions/CodeBlock/components/CodeBlockActiveButton.tsx

@@ -1,66 +0,0 @@
-import React, { useMemo } from 'react';
-
-import type { BundledLanguage } from 'shiki';
-import {
-  ActionButton,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from 'reactjs-tiptap-editor-pro/components';
-import { MAP_LANGUAGE_CODE_LABELS } from 'reactjs-tiptap-editor-pro/constants';
-
-interface Props {
-  editor: any
-  disabled?: boolean
-  color?: string
-  shortcutKeys?: string[]
-  maxHeight?: string | number
-  tooltip?: string
-  languages?: BundledLanguage[]
-  action: (language: string) => void
-  icon?: any
-}
-
-function CodeBlockActiveButton({ action, languages, ...props }: Props) {
-  const onClick = (language: string) => {
-    action(language);
-  };
-
-  const langs = useMemo(() => {
-    return languages?.map((language) => {
-      const title = MAP_LANGUAGE_CODE_LABELS[language] || language;
-
-      return {
-        title,
-        // icon: language.icon,
-        language,
-      };
-    });
-  }, [languages]);
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger disabled={props?.disabled} asChild>
-        <ActionButton
-          tooltip={props?.tooltip}
-          disabled={props?.disabled}
-          icon={props?.icon}
-        />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-full !max-h-[180px] !overflow-y-scroll">
-        {langs?.map((item: any) => {
-          return (
-            <DropdownMenuItem key={`codeblock-${item.title}`} onClick={() => onClick(item.language)}>
-              <div className="h-full ml-1">
-                {item.title}
-              </div>
-            </DropdownMenuItem>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export default CodeBlockActiveButton;

package/src/extensions/CodeBlock/components/NodeViewCodeBlock/NodeViewCodeBlock.tsx

@@ -1,89 +0,0 @@
-import React, { useCallback, useMemo, useRef } from 'react';
-
-import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
-import clsx from 'clsx';
-import { Copy, CopyCheck } from 'lucide-react';
-
-import { IconComponent } from 'reactjs-tiptap-editor-pro/components';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'reactjs-tiptap-editor-pro/components/ui/select';
-import { DEFAULT_LANGUAGE_CODE_BLOCK } from 'reactjs-tiptap-editor-pro/constants';
-import { CodeBlock } from 'reactjs-tiptap-editor-pro/extensions';
-import useCopy from 'reactjs-tiptap-editor-pro/hooks/useCopy';
-import { useEditableEditor } from 'reactjs-tiptap-editor-pro/store/editableEditor';
-import { deleteNode } from 'reactjs-tiptap-editor-pro/utils/delete-node';
-
-import styles from './index.module.scss';
-
-export function NodeViewCodeBlock({ editor, node: { attrs }, updateAttributes, extension }: any) {
-  const { isCopied, copyToClipboard } = useCopy();
-
-  const listLang = useMemo(() => {
-    return extension.options.languages?.length ? extension.options.languages : DEFAULT_LANGUAGE_CODE_BLOCK;
-  }, [extension.options.languages]);
-
-  const isEditable = useEditableEditor();
-
-  const isPrint = editor?.options?.editorProps?.print;
-  const { language: defaultLanguage } = attrs;
-  const $container: any = useRef<HTMLPreElement>(null);
-
-  const deleteMe = useCallback(() => deleteNode(CodeBlock.name, editor), [editor]);
-
-  return (
-    <NodeViewWrapper className={clsx(styles.wrap, !isPrint && styles.maxHeight, 'render-wrapper')}>
-
-      <div className={clsx(styles.blockInfo, {
-        [styles.blockInfoEditable]: !isEditable,
-      })}
-
-      >
-        <span
-          className={clsx(styles.btnCopy, isCopied && styles.copied)}
-          onClick={() => copyToClipboard($container.current.innerText)}
-        >
-          {!isCopied ? <Copy size={16} /> : <CopyCheck size={16} />}
-        </span>
-
-        <span
-          className={styles.btnDelete}
-          onClick={deleteMe}
-        >
-          <IconComponent
-            name="Trash2"
-          />
-        </span>
-
-        <div className={styles.selectLang}>
-          <Select
-            defaultValue={defaultLanguage || 'auto'}
-            disabled={!isEditable}
-            onValueChange={value => updateAttributes({ language: value })}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="Language" />
-            </SelectTrigger>
-
-            <SelectContent className="max-h-60 overflow-y-auto">
-              <SelectItem value="auto">
-                Auto
-              </SelectItem>
-
-              {listLang.map((lang: any, index: any) => (
-                <SelectItem key={`code-lang-${index}`}
-                  value={lang}
-                >
-                  {lang.charAt(0).toUpperCase() + lang.slice(1)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-      </div>
-
-      <pre ref={$container}>
-        <NodeViewContent as="code" />
-      </pre>
-    </NodeViewWrapper>
-  );
-}

package/src/extensions/CodeBlock/components/NodeViewCodeBlock/index.module.scss

@@ -1,81 +0,0 @@
-.wrap {
-  position: relative;
-
-  code {
-    margin: 0 !important;
-  }
-
-  pre {
-    margin: 10px 0 !important;
-  }
-
-  &.maxHeight {
-    code {
-      max-height: 370px;
-    }
-  }
-
-  &:hover {
-    .btnCopy,
-    .btnDelete {
-      opacity: 1;
-    }
-  }
-}
-
-.blockInfo {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  z-index: 2;
-  top: 5px;
-  right: 5px;
-  gap: 8px;
-}
-
-.blockInfoEditable {
-  display: none;
-}
-
-.selectLang {
-  cursor: pointer;
-  transition: all .3s;
-  border-radius: 4px;
-  border-width: 0px !important;
-
-  > button {
-    padding: 0px !important;
-    height: initial !important;
-    outline: none !important;
-    border: none !important;
-    outline-offset: 0px !important;
-    color: white !important;
-  }
-
-  .SelectContent {
-    max-height: 200px;
-    overflow-y: auto;
-  }
-}
-
-.btnCopy {
-  color: #ebebebbf;
-  cursor: pointer;
-  transition: all 0.3s;
-  opacity: 0;
-}
-
-.copied {
-  color: rgb(125, 207, 2);
-}
-
-.btnDelete {
-  color: #ebebebbf;
-  cursor: pointer;
-  transition: all 0.3s;
-  opacity: 0;
-
-  &:hover {
-    color: #ff4d4f;
-  }
-}

package/src/extensions/CodeBlock/highlighter.ts

@@ -1,132 +0,0 @@
-import type {
-  BundledLanguage,
-  BundledTheme,
-  Highlighter,
-} from 'shiki';
-import {
-  bundledLanguages,
-  bundledThemes,
-  createHighlighter,
-} from 'shiki';
-import { findChildren } from '@tiptap/core';
-import type { Node as ProsemirrorNode } from '@tiptap/pm/model';
-
-let highlighter: Highlighter | undefined;
-let highlighterPromise: Promise<void> | undefined;
-const loadingLanguages = new Set<BundledLanguage>();
-const loadingThemes = new Set<BundledTheme>();
-
-interface HighlighterOptions {
-  themes: (BundledTheme | null | undefined)[]
-  languages: (BundledLanguage | null | undefined)[]
-}
-
-export function resetHighlighter() {
-  highlighter = undefined;
-  highlighterPromise = undefined;
-  loadingLanguages.clear();
-  loadingThemes.clear();
-}
-
-export function getShiki() {
-  return highlighter;
-}
-
-/**
- * Load the highlighter. Makes sure the highlighter is only loaded once.
- */
-export function loadHighlighter(opts: HighlighterOptions) {
-  if (!highlighter && !highlighterPromise) {
-    const themes = opts.themes.filter(
-      (theme): theme is BundledTheme => !!theme && theme in bundledThemes,
-    );
-    const langs = opts.languages.filter(
-      (lang): lang is BundledLanguage => !!lang && lang in bundledLanguages,
-    );
-    highlighterPromise = createHighlighter({ themes, langs }).then((h) => {
-      highlighter = h;
-    });
-    return highlighterPromise;
-  }
-
-  if (highlighterPromise) {
-    return highlighterPromise;
-  }
-}
-
-/**
- * Loads a theme if it's valid and not yet loaded.
- * @returns true or false depending on if it got loaded.
- */
-export async function loadTheme(theme: BundledTheme) {
-  if (
-    highlighter
-    && !highlighter.getLoadedThemes().includes(theme)
-    && !loadingThemes.has(theme)
-    && theme in bundledThemes
-  ) {
-    loadingThemes.add(theme);
-    await highlighter.loadTheme(theme);
-    loadingThemes.delete(theme);
-    return true;
-  }
-
-  return false;
-}
-
-/**
- * Loads a language if it's valid and not yet loaded
- * @returns true or false depending on if it got loaded.
- */
-export async function loadLanguage(language: BundledLanguage) {
-  if (
-    highlighter
-    && !highlighter.getLoadedLanguages().includes(language)
-    && !loadingLanguages.has(language)
-    && language in bundledLanguages
-  ) {
-    loadingLanguages.add(language);
-    await highlighter.loadLanguage(language);
-    loadingLanguages.delete(language);
-    return true;
-  }
-
-  return false;
-}
-
-/**
- * Initializes the highlighter based on the prosemirror document,
- * with the themes and languages in the document.
- */
-export async function initHighlighter({
-  doc,
-  name,
-  defaultTheme,
-  defaultLanguage,
-}: {
-  doc: ProsemirrorNode
-  name: string
-  defaultLanguage: BundledLanguage | null | undefined
-  defaultTheme: BundledTheme
-}) {
-  const codeBlocks = findChildren(doc, node => node.type.name === name);
-
-  const themes = [
-    ...codeBlocks.map(block => block.node.attrs.theme as BundledTheme),
-    defaultTheme,
-  ];
-  const languages = [
-    ...codeBlocks.map(block => block.node.attrs.language as BundledLanguage),
-    defaultLanguage,
-  ];
-
-  if (!highlighter) {
-    const loader = loadHighlighter({ languages, themes });
-    await loader;
-  } else {
-    await Promise.all([
-      ...themes.flatMap(theme => loadTheme(theme)),
-      ...languages.flatMap(language => !!language && loadLanguage(language)),
-    ]);
-  }
-}

package/src/extensions/CodeBlock/index.ts

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

package/src/extensions/CodeBlock/shiki-plugin.ts

@@ -1,213 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { findChildren } from '@tiptap/core';
-import type { Node as ProsemirrorNode } from '@tiptap/pm/model';
-import type { PluginView } from '@tiptap/pm/state';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { Decoration, DecorationSet } from '@tiptap/pm/view';
-import type { BundledLanguage, BundledTheme } from 'shiki';
-
-import {
-  getShiki,
-  initHighlighter,
-  loadLanguage,
-  loadTheme,
-} from './highlighter';
-
-/** Create code decorations for the current document */
-function getDecorations({
-  doc,
-  name,
-  defaultTheme,
-  defaultLanguage,
-}: {
-  doc: ProsemirrorNode
-  name: string
-  defaultLanguage: BundledLanguage | null | undefined
-  defaultTheme: BundledTheme
-}) {
-  const decorations: Decoration[] = [];
-
-  const codeBlocks = findChildren(doc, node => node.type.name === name);
-
-  codeBlocks.forEach((block) => {
-    let from = block.pos + 1;
-    let language = block.node.attrs.language || defaultLanguage;
-    const theme = block.node.attrs.theme || defaultTheme;
-
-    const highlighter = getShiki();
-
-    if (!highlighter)
-      return;
-
-    if (!highlighter.getLoadedLanguages().includes(language)) {
-      language = 'plaintext';
-    }
-
-    const themeToApply = highlighter.getLoadedThemes().includes(theme)
-      ? theme
-      : highlighter.getLoadedThemes()[0];
-
-    const tokens = highlighter.codeToTokensBase(block.node.textContent, {
-      lang: language,
-      theme: themeToApply,
-    });
-
-    for (const line of tokens) {
-      for (const token of line) {
-        const to = from + token.content.length;
-
-        const decoration = Decoration.inline(from, to, {
-          style: `color: ${token.color}`,
-        });
-
-        decorations.push(decoration);
-
-        from = to;
-      }
-
-      from += 1;
-    }
-  });
-
-  return DecorationSet.create(doc, decorations);
-}
-
-export function ShikiPlugin({
-  name,
-  defaultLanguage,
-  defaultTheme,
-}: {
-  name: string
-  defaultLanguage: BundledLanguage | null | undefined
-  defaultTheme: BundledTheme
-}) {
-  //@ts-expect-error
-  const shikiPlugin = new Plugin<any>({
-    key: new PluginKey('shiki'),
-
-    view(view) {
-      // This small view is just for initial async handling
-      class ShikiPluginView implements PluginView {
-        constructor() {
-          this.initDecorations();
-        }
-
-        update() {
-          this.checkUndecoratedBlocks();
-        }
-
-        destroy() {
-          return;
-        }
-
-        // Initialize shiki async, and then highlight initial document
-        async initDecorations() {
-          const doc = view.state.doc;
-          await initHighlighter({ doc, name, defaultLanguage, defaultTheme });
-          const tr = view.state.tr.setMeta('shikiPluginForceDecoration', true);
-          view.dispatch(tr);
-        }
-
-        // When new codeblocks were added and they have missing themes or
-        // languages, load those and then add code decorations once again.
-        async checkUndecoratedBlocks() {
-          const codeBlocks = findChildren(
-            view.state.doc,
-            node => node.type.name === name,
-          );
-
-          // Load missing themes or languages when necessary.
-          // loadStates is an array with booleans depending on if a theme/lang
-          // got loaded.
-          const loadStates = await Promise.all(
-            codeBlocks.flatMap(block => [
-              loadTheme(block.node.attrs.theme),
-              loadLanguage(block.node.attrs.language),
-            ]),
-          );
-          const didLoadSomething = loadStates.includes(true);
-
-          // The asynchronous nature of this is potentially prone to
-          // race conditions. Imma just hope it's fine lol
-
-          if (didLoadSomething) {
-            const tr = view.state.tr.setMeta('shikiPluginForceDecoration', true);
-            view.dispatch(tr);
-          }
-        }
-      }
-
-      return new ShikiPluginView();
-    },
-
-    state: {
-      init: (_, { doc }) => {
-        return getDecorations({
-          doc,
-          name,
-          defaultLanguage,
-          defaultTheme,
-        });
-      },
-      apply: (transaction, decorationSet, oldState, newState) => {
-        const oldNodeName = oldState.selection.$head.parent.type.name;
-        const newNodeName = newState.selection.$head.parent.type.name;
-        const oldNodes = findChildren(
-          oldState.doc,
-          node => node.type.name === name,
-        );
-        const newNodes = findChildren(
-          newState.doc,
-          node => node.type.name === name,
-        );
-
-        const didChangeSomeCodeBlock
-          = transaction.docChanged
-          // Apply decorations if:
-          // selection includes named node,
-            && ([oldNodeName, newNodeName].includes(name)
-            // OR transaction adds/removes named node,
-              || newNodes.length !== oldNodes.length
-            // OR transaction has changes that completely encapsulte a node
-            // (for example, a transaction that affects the entire document).
-            // Such transactions can happen during collab syncing via y-prosemirror, for example.
-              || transaction.steps.some((step: any) => {
-                return (
-                  step.from !== undefined
-                  && step.to !== undefined
-                  && oldNodes.some((node) => {
-                    return (
-                      node.pos >= step.from
-                      && node.pos + node.node.nodeSize <= step.to
-                    );
-                  })
-                );
-              }));
-
-        // only create code decoration when it's necessary to do so
-        if (
-          transaction.getMeta('shikiPluginForceDecoration')
-          || didChangeSomeCodeBlock
-        ) {
-          return getDecorations({
-            doc: transaction.doc,
-            name,
-            defaultLanguage,
-            defaultTheme,
-          });
-        }
-
-        return decorationSet.map(transaction.mapping, transaction.doc);
-      },
-    },
-
-    props: {
-      //@ts-expect-error
-      decorations(state) {
-        return shikiPlugin.getState(state);
-      },
-    },
-  });
-
-  return shikiPlugin;
-}

package/src/extensions/Color/Color.ts

@@ -1,52 +0,0 @@
-import TiptapColor from '@tiptap/extension-color';
-import type { ColorOptions as TiptapColorOptions } from '@tiptap/extension-color';
-
-import ColorActionButton from 'reactjs-tiptap-editor-pro/extensions/Color/components/ColorActionButton';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
-
-export interface ColorOptions extends TiptapColorOptions, GeneralOptions<ColorOptions> {
-  /**
-   * An array of color options to display in the color picker
-   */
-  colors?: string[]
-
-  /**
-   * The default color to use when no color is selected
-   */
-  defaultColor?: string
-}
-
-export const Color = TiptapColor.extend<ColorOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      button({ editor, t, extension }) {
-        return {
-          component: ColorActionButton,
-          componentProps: {
-            colors: extension.options.colors,
-            defaultColor: extension.options.defaultColor,
-            action: (color?: unknown) => {
-              if (color === undefined) {
-                editor.chain().focus().unsetColor().run();
-              }
-              if (typeof color === 'string') {
-                editor.chain().focus().setColor(color).run();
-              }
-            },
-            isActive: () => {
-              const { color } = editor.getAttributes('textStyle');
-              if (!color) {
-                return false;
-              }
-              return editor.isActive({ color }) || false;
-            },
-            editor,
-            disabled: !editor.can().setColor(''),
-            tooltip: t('editor.color.tooltip'),
-          },
-        };
-      },
-    };
-  },
-});