Как добавить собственное расширение при использовании машинописного текста

Question

Я пытаюсь добавить собственное расширение в scrumpy/tiptap, но в моем проекте используется машинописный текст, и я думаю, что это вызывает у меня некоторые проблемы.

Я получил код из этой проблемы и попытался импортировать и использовать его следующим образом:

import HighlightMark from '../ts/tiptap-extensions/HighlightMark';

...

this.editor = new Editor({
  content: '<p>This is just a boring paragraph.</p>',
  extensions: [new HighlightMark()]
})

Но я столкнулся с этой ошибкой

Тип "HighlightMark" нельзя присвоить типу "ExtensionOption". Тип "HighlightMark" нельзя присвоить типу "Mark". Типы, возвращаемые schema.toDOM(...), несовместимы между этими типами. Тип '(строка | число | { style: string; })[]' не может быть назначен типу 'DOMOutputSpec'. Свойство '0' отсутствует в типе '(строка | число | { style: string; })[]', но является обязательным для типа 'DOMOutputSpecArray'.

---

Я попытался импортировать его в.d.ts (как и все встроенные расширения подсказки), но получаю сообщение об ошибке, говорящее, что я не могу импортировать файлы по относительному пути здесь:

Объявление импорта или экспорта в объявлении внешнего модуля не может ссылаться на модуль через относительное имя модуля. Ts(2439)

---

Я также пробовал просто изменить файл на машинописный (HighlightMark.ts), но затем возникает несколько ошибок:

Свойство "commands" в типе "HighlightMark" нельзя присвоить тому же свойству в базовом типе "Mark". Type '({ type }: { type: any; }) => (attrs: any) => Команда' не может быть присвоена типу '({ type, schema, attrs }: { type: MarkType; schema: MarkSpec; attrs: { [ключ: строка]: строка; }; }) => CommandGetter'. Тип '(attrs: any) => Command' не может быть назначен типу 'CommandGetter'.

а также

'mark' объявлен, но его значение никогда не читается.ts(6133) Параметр 'mark' неявно имеет тип 'any'.ts(7006)

а также

Параметр attrs неявно имеет тип any. Tts (7006)

Кто-нибудь делал это раньше? На самом ли деле это возможно?

Это код из HighlightMark.js:

   import { Mark } from 'tiptap';
   import { toggleMark } from 'tiptap-commands'

  export default class HighlightMark extends Mark {
  get name() {
    return "mark";
  }

  get schema() {
    return {
      attrs: {
        color: {
          default: "rgba(240,87,100,0.7)"
        }
      },
      parseDOM: [
        {
          tag: "mark"
        }
      ],
      toDOM: mark => [
        "mark",
        {
          style: `background: red` // ${mark.attrs.color}
        },
        0
      ]
    };
  }

  commands({ type }) {
    return attrs => toggleMark(type, attrs);
  }
}

Answer 1

Кажется, я мог бы решить эту проблему, инициализировав подсказку вот так

this.editor = new Editor({
  content: '<p>This is just a boring paragraph.</p>',
  extensions: [new HighlightMark() as any]

Что не идеально, но, похоже, пока работает.

Если кто-то сможет опубликовать реальное решение, я отмечу его как ответ

Answer 2

Мне удалось обойти это, вернув объект из toDOM а не массив, например:

      toDOM: mark => {
  return {
    0: 'mark',
    1: {
      style: `background:${mark.attrs.color}`
    },
    2: '0'
  }
}

Answer 3

Я не сталкивался с той же проблемой, что и вы, но то, что сработало для меня, может помочь. Чтобы это работало для меня, мне пришлось экспортировать класс как модуль из моего файла .js. Для вас это будет выглядеть так:

HighlightMark.js

      import { Mark } from 'tiptap';
import { toggleMark } from 'tiptap-commands'

...

export { HighlightMark };

а затем в вашем основном файле ts

      
import highlightMark from '../ts/tiptap-extensions/HighlightMark';

...

this.editor = new Editor({
  content: '<p>This is just a boring paragraph.</p>',
  extensions: [ new HighlightMark() ]
})