umbraco-monaco-markdown-editor-action

Umbraco Monaco Markdown エディターアクション

これは何ですか？

Monaco Markdown Editor Actions は、Umbraco の Markdown エディターにカスタムツールバーボタンとキーボードショートカットを追加します。リンクや画像、カスタム Markdown 構文の挿入など、独自の機能で編集体験を拡張できます。アクションはエディターのツールバーに表示され、キーボードショートカットに反応させることができます。

ドキュメント

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

• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• Extension Registry: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry
• Monaco Editor: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types

関連する Foundation スキル

• モーダル: アクションからモーダルダイアログを開く場合

  • 参照スキル: umbraco-modals

• ローカライズ: ローカライズされたラベルを提供する場合

  • 参照スキル: umbraco-localization

ワークフロー

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

最小限の例

マニフェスト (manifests.ts)

export const manifests: Array<UmbExtensionManifest> = [
  {
    type: 'monacoMarkdownEditorAction',
    alias: 'My.MonacoMarkdownEditorAction.Custom',
    name: 'Custom Monaco Markdown Editor Action',
    api: () => import('./my-markdown-action.js'),
    meta: {
      label: 'Insert Custom',
      icon: 'icon-favorite',
    },
  },
];

アクションの実装 (my-markdown-action.ts)

import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';

export class MyMarkdownAction extends UmbControllerBase {
  constructor(host: UmbControllerHost) {
    super(host);
  }

  getUnique() {
    return 'My.MonacoMarkdownEditorAction.Custom';
  }

  getLabel() {
    return 'Insert Custom';
  }

  getKeybindings() {
    // Ctrl/Cmd + Shift + C
    return [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyC];
  }

  async execute({ editor, overlaySize }: { editor: any; overlaySize: UUIModalSidebarSize }) {
    if (!editor) throw new Error('Editor not found');

    const selection = editor.getSelections()[0];
    if (!selection) return;

    const selectedValue = editor.getValueInRange(selection);

    // Insert custom markdown
    editor.monacoEditor?.executeEdits('', [
      { range: selection, text: `**${selectedValue || 'custom'}**` },
    ]);

    editor.monacoEditor?.focus();
  }
}

export { MyMarkdownAction as api };

モーダル付きのアクション

import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';

export class MyModalMarkdownAction extends UmbControllerBase {
  getUnique() {
    return 'My.MonacoMarkdownEditorAction.Modal';
  }

  getLabel() {
    return 'Insert with Modal';
  }

  getKeybindings() {
    return [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM];
  }

  async execute({ editor, overlaySize }) {
    const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
    if (!modalManager) throw new Error('Modal manager not found');

    const selection = editor?.getSelections()[0];
    if (!selection) return;

    // Open a modal and use the result
    const modalContext = modalManager.open(this, MY_CUSTOM_MODAL, {
      modal: { size: overlaySize },
    });

    modalContext?.onSubmit().then((value) => {
      if (!value) return;
      editor.monacoEditor?.executeEdits('', [
        { range: selection, text: value.text },
      ]);
    });
  }
}

export { MyModalMarkdownAction as api };

インターフェースリファレンス

interface ManifestMonacoMarkdownEditorAction extends ManifestApi<any> {
  type: 'monacoMarkdownEditorAction';
  meta?: MetaMonacoMarkdownEditorAction;
}

interface MetaMonacoMarkdownEditorAction {
  icon?: string | null;
  label?: string | null;  // Can use localization key like '#buttons_linkInsert'
}

一般的なキーバインディング

// Single key
monaco.KeyCode.Enter

// Ctrl/Cmd combinations
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK  // Ctrl+K or Cmd+K
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyC  // Ctrl+Shift+C
monaco.KeyMod.Alt | monaco.KeyCode.KeyI  // Alt+I

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