Extension framework changes for Editor 2.0 (New Editor)

const filePath = guides.editor.filePath;
if (filePath) {
tcx.api.getMetadata(filePath).subscribe((metadata) => {
  // use metadata...
  });
}

const filePath = guides.editor.filePath;
if (filePath?.endsWith(".ditamap")) {
  // ditamap-specific handling
}

if (guides.editor.version  === '1.0.0') {
  // CKEditor specific logic
}

guides.editor.appState(keyName: string): unknown

const editorMode = guides.editor.appState('editorMode');

guides.editor.focus(): boolean

guides.editor.focus();
const hasSelection = !!guides.editor.runUtil('hasSelection');
// ...proceed with wrap or insert

guides.editor.canInsertXmlElement(tagName: string, insertAfter?: boolean): boolean

const canInsert = guides.editor.canInsertXmlElement("xref");
if (!canInsert) {
  return tcx.util.showAlert("warning", "xref is not allowed here");
}

const canInsert = guides.editor.canInsertXmlElement("sup");
if (!canInsert) {
  return tcx.util.showAlert("warning", "superscript is not allowed here");
}

guides.editor.selectCurrentBlockElement(): boolean

guides.editor.selectCurrentBlockElement();

guides.editor.getValidElementNamesForInsertion(args: {
  insertMode?: 'after' | 'before' | 'rename',
  strict: boolean
}): string[] | false

const validElements = guides.editor.getValidElementNamesForInsertion({
  insertMode: 'after',
  strict: true
});

guides.editor.updateAttributeByXpath(args: UpdateXpathArgs): any

guides.editor.runCommand(commandName: string, ...args: any[]): boolean

guides.editor.canRunCommand(commandName: string, ...args: any[]): boolean

if (guides.editor.canRunCommand('surroundWithElement', 'sup')) {
  guides.editor.runCommand('surroundWithElement', 'sup');
}

guides.editor.runUtil(utilName: string, ...args: any[]): any

const textPos = guides.editor.runUtil("getTextPos");
const ancestorNames = guides.editor.runUtil(
  "getAncestorsNames",
  typeof textPos === "number" ? textPos : undefined
);

const xrefRanges = guides.editor.runUtil("findPositionRanges", "xref") || [];
xrefRanges.forEach((range) => {
  const id = guides.editor.runUtil("getAttributeAtPosition", range.from, "id");
  const placeholderText = guides.editor.runUtil(
    "getAttributeAtPosition",
    range.from,
    "placeholdertext"
  );
});

const rootRange = guides.editor.runUtil("findPositionRange", "concept"); // or "topic"
if (rootRange) {
  const createdDate = guides.editor.runUtil(
    "getAttributeAtPosition",
    rootRange.from,
    "createdDate"
  );
  const author = guides.editor.runUtil(
    "getAttributeAtPosition",
    rootRange.from,
    "author"
  );
}

const ancestorsDetails = guides.editor.runUtil('getAncestorsDetails');
const selectedText = guides.editor.runUtil('getSelectedPlainText');
const hasSelection = !!guides.editor.runUtil('hasSelection');

const firstAncestor = ancestorsDetails?.currNode || ancestorsDetails?.ancestors?.[0]?.tagName;
if (firstAncestor === 'ph') {
  tcx.util.showAlert("warning", "Operation is not allowed inside this element type.");
  return;
}

const ancestorItems = guides.editor.runUtil('getAncestorXpaths', true);
for (const item of ancestorItems) {
  const attrs = guides.editor.runUtil('getSerializableAttributes', item.xpath);
  if (attrs?.id) { /* use element ID */ }
}

guides.editor.addDecoration(
  id: string,
  selector: string,
  options: DecorationOptions
): boolean

guides.editor.addDecoration('highlight-sections', 'section', {
  class: 'my-section-highlight'
});

guides.editor.addDecoration('section-numbers', 'section', {
  computeAttributes: (node, context) => ({
    'data-number-label': String(context.index + 1)
  })
});

guides.editor.addDecoration('important-sections', 'section', {
  class: 'section-important',
  filter: (node) => node.attrs?.xmlAttrs?.importance === 'high'
});

guides.editor.addDecoration('numbering-mode', 'conbody', {
  class: 'legacy-numbering'
});

guides.editor.addDecoration('section-numbers', 'section', {
  computeAttributes: (node, context) => ({
    'data-number-label': String(context.index + 1)
  })
});

guides.editor.removeDecoration(id: string): boolean

guides.editor.removeDecoration('section-numbers');

guides.editor.batchDecorations(changes: DecorationBatchChange[]): boolean

type DecorationBatchChange =
  | { action: 'add', id: string, selector: string, options: DecorationOptions }
  | { action: 'remove', id: string }

guides.editor.batchDecorations([
  { action: 'remove', id: 'legacy-numbering' },
  {
    action: 'add',
    id: 'division-numbering',
    selector: 'conbody',
    options: { class: 'division-numbering' }
  }
]);

guides.editor.batchDecorations([
  { action: 'remove', id: 'old-highlights' },
  {
    action: 'add',
    id: 'section-labels',
    selector: 'section',
    options: {
      computeAttributes: (node, ctx) => ({ 'data-section-index': String(ctx.index) })
    }
  },
  {
    action: 'add',
    id: 'note-style',
    selector: 'note',
    options: { class: 'styled-note' }
  }
]);

guides.editor.clearDecorations(): boolean

guides.editor.clearDecorations();

guides.editor.getDecorations(): string[]

const active = guides.editor.getDecorations();
console.log('Active decorations:', active);
// e.g. ['section-numbers', 'numbering-mode', 'note-style']

guides.editor.registerPlugin(factory: () => PluginConfig): void

interface PluginConfig {
  plugin: ProseMirrorPlugin | ProseMirrorPlugin[]
  css?: string  // Injected into editor's shadow DOM
}

guides.ready(() => {
  guides.editor.registerPlugin(createNumberingPlugin);
  guides.editor.registerPlugin(createXrefPlugin);
});

guides.editor.registerPlugin(() => ({
  plugin: new guides.editor.prosemirror.state.Plugin({
    key: new guides.editor.prosemirror.state.PluginKey("myPlugin"),
    props: {
      decorations(state) {
        // return DecorationSet...
      }
    }
  }),
  css: `.my-decoration { background: yellow; }`
}));

const myPluginKey = new guides.editor.prosemirror.state.PluginKey("myPlugin");

const createMyPlugin = () => {
  const { Plugin } = guides.editor.prosemirror.state;
  const { Decoration, DecorationSet } = guides.editor.prosemirror.view;

  return {
    plugin: new Plugin({
      key: myPluginKey,
      state: {
        init() { return { enabled: true }; },
        apply(tr, value) {
          const meta = tr.getMeta(myPluginKey);
          return meta ? { ...value, ...meta } : value;
        }
      },
      props: {
        decorations(state) {
          const decorations = [];
          state.doc.descendants((node, pos) => {
            if (node.type.name === "section") {
              decorations.push(
                Decoration.node(pos, pos + node.nodeSize, { class: "my-section" })
              );
            }
          });
          return DecorationSet.create(state.doc, decorations);
        }
      }
    }),
    css: `.my-section { border-left: 3px solid #ccc; padding-left: 8px; }`
  };
};

const xrefPluginKey = new guides.editor.prosemirror.state.PluginKey("xrefDisplay");

const createXrefPlugin = () => {
  const { Plugin } = guides.editor.prosemirror.state;
  const { Decoration, DecorationSet } = guides.editor.prosemirror.view;

  return {
    plugin: new Plugin({
      key: xrefPluginKey,
      props: {
        decorations(state) {
          const decorations = [];
          state.doc.descendants((node, pos) => {
            if (node.type.name.includes("xref")) {
              const display = node.attrs?.xmlAttrs?.placeholdertext;
              if (display) {
                decorations.push(
                  Decoration.widget(pos + 1, () => {
                    const el = document.createElement("span");
                    el.textContent = `[${display}]`;
                    el.setAttribute("contenteditable", "false");
                    return el;
                  }, { key: `xref-${pos}` })
                );
              }
            }
          });
          return DecorationSet.create(state.doc, decorations);
        }
      }
    }),
    css: `.xref-display-text { color: #0074d9; pointer-events: none; }`
  };
};

const uniqueIds = guides.util.lodash.uniq(ids);

guides.util.async.parallel([task1, task2], callback);