reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

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

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+
+import type { BundledLanguage } from 'shiki';
+import {
+  ActionButton,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components';
+import { MAP_LANGUAGE_CODE_LABELS } from '@/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

@@ -0,0 +1,89 @@
+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 '@/components';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { DEFAULT_LANGUAGE_CODE_BLOCK } from '@/constants';
+import { CodeBlock } from '@/extensions';
+import useCopy from '@/hooks/useCopy';
+import { useEditableEditor } from '@/store/editableEditor';
+import { deleteNode } from '@/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

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

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

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

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

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

@@ -0,0 +1,52 @@
+import TiptapColor from '@tiptap/extension-color';
+import type { ColorOptions as TiptapColorOptions } from '@tiptap/extension-color';
+
+import ColorActionButton from '@/extensions/Color/components/ColorActionButton';
+import type { GeneralOptions } from '@/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'),
+          },
+        };
+      },
+    };
+  },
+});