3

我正在尝试向 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(...)' 返回的类型在这些类型之间不兼容。类型 '(string | number | { style: string; })[]' 不可分配给类型 'DOMOutputSpec'。类型“(string | number | { style: string; })[]”中缺少属性“0”，但在“DOMOutputSpecArray”类型中是必需的。

我尝试在 .d.ts 中导入它（因为我必须使用所有内置的 Tiptap 扩展），但我收到一个错误，告诉我我无法从此处的相对路径导入文件：

环境模块声明中的导入或导出声明不能通过相对模块名称引用模块。ts(2439)

我也尝试将文件更改为打字稿（HighlightMark.ts），但它给了我几个错误：

'HighlightMark' 类型中的属性 'commands' 不能分配给基本类型 'Mark' 中的相同属性。类型 '({ type }: { type: any; }) => (attrs: any) => Command' 不可分配给类型 '({ type, schema, attrs }: { type: MarkType; schema: MarkSpec; attrs : { [key: string]: string; }; }) => CommandGetter'。类型 '(attrs: any) => Command' 不可分配给类型 'CommandGetter'。

和

'mark' 已声明，但其值从未被读取。ts(6133) 参数 'mark' 隐含地具有 'any' 类型。ts(7006)

和

参数“attrs”隐式具有“任何”类型.ts(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);
  }
}
4

3 回答 3

1

看来我可以通过像这样初始化tiptap来解决这个问题

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

这并不理想，但现在似乎正在工作。

如果有人可以发布真正的解决方案，我会将其标记为答案

于 2020-05-30T19:47:34.010 回答
1

我能够通过从而toDOM不是数组返回一个对象来解决这个问题，如下所示：

toDOM: mark => {
  return {
    0: 'mark',
    1: {
      style: `background:${mark.attrs.color}`
    },
    2: '0'
  }
}
于 2021-04-17T20:28:36.663 回答
0

我没有遇到与您相同的问题，但是对我有用的方法可能会有所帮助。为了让它对我有用，我必须将类作为模块从我的 .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() ]
})
于 2020-12-06T21:00:03.083 回答