umbraco-tiptap-extension

Umbraco Tiptap 拡張機能

これは何ですか？

Tiptap 拡張機能は、Umbraco のリッチテキストエディター（Tiptap 上に構築されています）に機能を追加します。拡張機能は、新しいノードタイプ（カスタムブロックなど）、マーク（カスタム書式など）、またはその他のエディター機能を追加できます。拡張機能 API は、エディターに登録される基盤となる Tiptap 拡張機能を提供します。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください：

• 拡張機能の種類: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types
• リッチテキストエディター: https://docs.umbraco.com/umbraco-cms/model-your-content/property-editors/built-in-umbraco-property-editors/rich-text-editor
• Tiptap ドキュメント: https://tiptap.dev/docs/editor/extensions/overview
• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation

関連スキル

• Tiptap ツールバー拡張機能: ツールバーボタンを追加する場合

  • 参照スキル: umbraco-tiptap-toolbar-extension

• Tiptap ステータスバー拡張機能: ステータスバー要素を追加する場合

  • 参照スキル: umbraco-tiptap-statusbar-extension

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - どのような機能ですか？ ノード、マーク、または拡張機能ですか？ カスタムスタイルは必要ですか？
3. ファイルを生成 - 最新のドキュメントに基づいてマニフェスト + API クラスを作成します
4. 説明 - 作成された内容とテスト方法を示します

最小限の例

マニフェスト (manifests.ts)

import type { ManifestTiptapExtension } from '@umbraco-cms/backoffice/extension-registry';

const manifest: ManifestTiptapExtension = {
  type: 'tiptapExtension',
  alias: 'My.TiptapExtension.Highlight',
  name: 'Highlight Extension',
  api: () => import('./highlight.tiptap-api.js'),
  meta: {
    icon: 'icon-marker',
    label: 'Highlight',
    group: 'formatting',
  },
};

export const manifests = [manifest];

拡張機能 API (highlight.tiptap-api.ts)

import { UmbTiptapExtensionApiBase } from '@umbraco-cms/backoffice/tiptap';
import type { UmbTiptapExtensionArgs } from '@umbraco-cms/backoffice/tiptap';
import Highlight from '@tiptap/extension-highlight';

export default class HighlightTiptapExtensionApi extends UmbTiptapExtensionApiBase {
  getTiptapExtensions(args?: UmbTiptapExtensionArgs) {
    return [
      Highlight.configure({
        multicolor: true,
      }),
    ];
  }
}

カスタムノード拡張機能

import { UmbTiptapExtensionApiBase } from '@umbraco-cms/backoffice/tiptap';
import { Node } from '@tiptap/core';

export default class CalloutTiptapExtensionApi extends UmbTiptapExtensionApiBase {
  getTiptapExtensions() {
    const CalloutNode = Node.create({
      name: 'callout',
      group: 'block',
      content: 'block+',

      addAttributes() {
        return {
          type: {
            default: 'info',
          },
        };
      },

      parseHTML() {
        return [{ tag: 'div[data-callout]' }];
      },

      renderHTML({ HTMLAttributes }) {
        return ['div', { 'data-callout': '', ...HTMLAttributes }, 0];
      },
    });

    return [CalloutNode];
  }
}

カスタムマーク拡張機能

import { UmbTiptapExtensionApiBase } from '@umbraco-cms/backoffice/tiptap';
import { Mark } from '@tiptap/core';

export default class CustomMarkTiptapExtensionApi extends UmbTiptapExtensionApiBase {
  getTiptapExtensions() {
    const CustomMark = Mark.create({
      name: 'customHighlight',

      addAttributes() {
        return {
          color: {
            default: 'yellow',
          },
        };
      },

      parseHTML() {
        return [{ tag: 'mark' }];
      },

      renderHTML({ HTMLAttributes }) {
        return ['mark', { style: `background-color: ${HTMLAttributes.color}` }, 0];
      },
    });

    return [CustomMark];
  }
}

カスタムスタイル付き拡張機能

import { UmbTiptapExtensionApiBase } from '@umbraco-cms/backoffice/tiptap';
import { css } from '@umbraco-cms/backoffice/external/lit';
import Highlight from '@tiptap/extension-highlight';

export default class StyledHighlightApi extends UmbTiptapExtensionApiBase {
  getTiptapExtensions() {
    return [Highlight];
  }

  // Custom styles for the editor
  getStyles() {
    return css`
      mark {
        background-color: yellow;
        padding: 0.1em 0.2em;
        border-radius: 2px;
      }
    `;
  }
}

プロパティエディターからの設定の使用

import { UmbTiptapExtensionApiBase } from '@umbraco-cms/backoffice/tiptap';
import type { UmbTiptapExtensionArgs } from '@umbraco-cms/backoffice/tiptap';
import Highlight from '@tiptap/extension-highlight';

export default class ConfigurableHighlightApi extends UmbTiptapExtensionApiBase {
  getTiptapExtensions(args?: UmbTiptapExtensionArgs) {
    // Access data type configuration
    const multicolor = args?.configuration?.getValueByAlias('multicolor') ?? false;

    return [
      Highlight.configure({
        multicolor,
      }),
    ];
  }
}

メタプロパティ

プロパティ	説明
icon	設定 UI に表示されるアイコン
label	表示名
group	拡張機能を整理するためのグループ
description	オプションの説明

一般的な拡張機能グループ

• formatting - テキストの書式設定（太字、斜体など）
• structure - 構造要素（見出し、リストなど）
• media - メディア要素（画像、埋め込みなど）
• misc - その他の機能

以上です！ 常に最新のドキュメントを取得し、例は最小限に保ち、完全に動作するコードを生成してください。