multiple node view content

[ziqingchuan]

Description

通过讨论折叠块组件的实现，启发关于multiple node view content的实现思路。
The discussion regarding the implementation of the collapsible block component has provided insights into implementing multiple node view content.

URL

No response

About

How to Implement multiple node view content (Using a Collapsible Block as an Example)?

简体中文 | English

Schema定义

非常关键的点——定义好 schema 的结构：

      {
        title: 'foldBlock',
        pinyin: 'zhediekuai',
        name: '折叠块',
        icon: markRaw(FoldBlock),
        command: ({ editor, range }: commandPayload) => {
          editor
            .chain()
            .focus()
            .deleteRange(range)
            .insertContent(
              editor.schema.node('foldBlock', null, [
                editor.schema.node('foldBlockHeader', null, [editor.schema.node('paragraph')]),
                editor.schema.node('foldBlockContent', null, [editor.schema.node('paragraph')]),
              ]),
            )
            .run();
        },
      },

要保证multiple node view content能够正常创建，schema 一定要严格按结构来定义

本例子中，折叠块是由foldBlockHeader和FoldBlockContent组合起来的，它们都包含在foldBlock内部，故 schema 定义如上所示。

---

核心实现

FoldBlock 父组件扩展：

import FoldBlock from '@datawhale/new-editor/components/FoldBlock.vue';
import { mergeAttributes, Node } from '@tiptap/core';
import { VueNodeViewRenderer } from '@tiptap/vue-3';

export default Node.create({
  name: 'foldBlock',
  group: 'block',
  content: 'foldBlockHeader foldBlockContent',
  parseHTML() {
    return [
      {
        tag: 'foldBlock',
      },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return ['foldBlock', mergeAttributes(HTMLAttributes), 0];
  },
  addNodeView() {
    // @ts-expect-error tiptap-fix
    return VueNodeViewRenderer(FoldBlock);
  },
});

注意：组合起来的这些节点都要是同一个 group，此处为block

FoldBlock 父组件：

<template>
  <node-view-wrapper class="foldBlock-wrapper">
    <div class="collapse-icon" @click="isFolded = !isFolded">
      <component :is="!isFolded ? FoldUp : FoldDown"></component>
    </div>
    <node-view-content :class="isFolded ? 'is-folded' : 'not-folded'" />
  </node-view-wrapper>
</template>

<script lang="ts" setup>
import { NodeViewContent, NodeViewWrapper } from '@tiptap/vue-3';
import { ref } from 'vue';
import FoldDown from '../icons/FoldDown.vue';
import FoldUp from '../icons/FoldUp.vue';
const isFolded = ref(false);
</script>

<style lang="scss" scoped>

//Add your style!

</style>

注意：这里要用<node-view-content>而不是<foldBlock-header>+<foldBlock-content>子组件的形式，因为在创建时 prosemirror 会根据 schema 进行填充。

FoldBlockHeader 子组件扩展：

import CalloutHeader from '@datawhale/new-editor/components/FoldBlockHeader.vue';
import { Node, mergeAttributes } from '@tiptap/core';
import { VueNodeViewRenderer } from '@tiptap/vue-3';

export default Node.create({
  name: 'foldBlockHeader',
  group: 'block',
  content: 'block+',
  parseHTML() {
    return [
      {
        tag: 'foldBlockHeader',
      },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return ['foldBlockHeader', mergeAttributes(HTMLAttributes), 0];
  },
  addNodeView() {
    // @ts-expect-error tiptap-fix
    return VueNodeViewRenderer(CalloutHeader);
  },
});

FoldBlockHeader 子组件：

<template>
  <node-view-wrapper class="foldBlock-header">
    <div class="foldBlock-title">
      <node-view-content />
    </div>
  </node-view-wrapper>
</template>
<script lang="ts" setup>
import { NodeViewContent, NodeViewWrapper } from '@tiptap/vue-3';
</script>

<style lang="scss" scoped>

//Add your style!

</style>

FoldBlockContent 子组件扩展：

import CalloutContent from '@datawhale/new-editor/components/FoldBlockContent.vue';
import { Node, mergeAttributes } from '@tiptap/core';
import { VueNodeViewRenderer } from '@tiptap/vue-3';

export default Node.create({
  name: 'foldBlockContent',
  group: 'block',
  content: 'block+',
  parseHTML() {
    return [
      {
        tag: 'foldBlockContent',
      },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return ['foldBlockContent', mergeAttributes(HTMLAttributes), 0];
  },
  addNodeView() {
    // @ts-expect-error tiptap-fix
    return VueNodeViewRenderer(CalloutContent);
  },
});

FoldBlockContent 子组件：

<template>
  <node-view-wrapper class="foldBlock-content">
    <node-view-content />
  </node-view-wrapper>
</template>

<script setup lang="ts">
import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-3';
</script>

<style scoped>

//Add your style!

</style>

---

组件间的控制逻辑

对于折叠块，只需要通过一个按钮控制foldBlockContent的折叠与否，但实际上，<node-view-content>里面的组件并不在父组件里面，而是prosemirror填进去的，所以props和provide/inject/emit都会失效。

解决方法：引入动态class：<node-view-content :class="isFolded ? 'is-folded' : 'not-folded'" />, 然后通过在子组件里使用css选择器来控制是否显示。

---

至此，可以实现一个简单的折叠块的功能，可以分别在标题处和内容处分别编辑内容，也可以将内容折叠起来，其他类似的均可参照此处实现逻辑。

How to Implement multiple node view content (Using a Collapsible Block as an Example)?

Schema Definition

A crucial point: define the structure of the schema properly.

      {
        title: 'foldBlock',
        pinyin: 'zhediekuai',
        name: '折叠块',
        icon: markRaw(FoldBlock),
        command: ({ editor, range }: commandPayload) => {
          editor
            .chain()
            .focus()
            .deleteRange(range)
            .insertContent(
              editor.schema.node('foldBlock', null, [
                editor.schema.node('foldBlockHeader', null, [editor.schema.node('paragraph')]),
                editor.schema.node('foldBlockContent', null, [editor.schema.node('paragraph')]),
              ]),
            )
            .run();
        },
      },

To ensure that multiple node view content can be created correctly, the schema must be strictly defined according to the structure.

In this example, the collapsible block is composed of foldBlockHeader and FoldBlockContent, both of which are contained within foldBlock. Therefore, the schema is defined as shown above.

---

Core Implementation

FoldBlock Parent Component Extension:

import FoldBlock from '@datawhale/new-editor/components/FoldBlock.vue';
import { mergeAttributes, Node } from '@tiptap/core';
import { VueNodeViewRenderer } from '@tiptap/vue-3';

export default Node.create({
  name: 'foldBlock',
  group: 'block',
  content: 'foldBlockHeader foldBlockContent',
  parseHTML() {
    return [
      {
        tag: 'foldBlock',
      },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return ['foldBlock', mergeAttributes(HTMLAttributes), 0];
  },
  addNodeView() {
    // @ts-expect-error tiptap-fix
    return VueNodeViewRenderer(FoldBlock);
  },
});

Note: All the combined nodes should belong to the same group, which is block here.

FoldBlock Parent Component:

<template>
  <node-view-wrapper class="foldBlock-wrapper">
    <div class="collapse-icon" @click="isFolded = !isFolded">
      <component :is="!isFolded ? FoldUp : FoldDown"></component>
    </div>
    <node-view-content :class="isFolded ? 'is-folded' : 'not-folded'" />
  </node-view-wrapper>
</template>

<script lang="ts" setup>
import { NodeViewContent, NodeViewWrapper } from '@tiptap/vue-3';
import { ref } from 'vue';
import FoldDown from '../icons/FoldDown.vue';
import FoldUp from '../icons/FoldUp.vue';
const isFolded = ref(false);
</script>

<style lang="scss" scoped>

//Add your style!

</style>

Note: Here you should use <node-view-content> instead of the <foldBlock-header> + <foldBlock-content> child component form, because prosemirror will fill according to the schema during creation.

FoldBlockHeader Child Component Extension:

import CalloutHeader from '@datawhale/new-editor/components/FoldBlockHeader.vue';
import { Node, mergeAttributes } from '@tiptap/core';
import { VueNodeViewRenderer } from '@tiptap/vue-3';

export default Node.create({
  name: 'foldBlockHeader',
  group: 'block',
  content: 'block+',
  parseHTML() {
    return [
      {
        tag: 'foldBlockHeader',
      },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return ['foldBlockHeader', mergeAttributes(HTMLAttributes), 0];
  },
  addNodeView() {
    // @ts-expect-error tiptap-fix
    return VueNodeViewRenderer(CalloutHeader);
  },
});

FoldBlockHeader Child Component:

<template>
  <node-view-wrapper class="foldBlock-header">
    <div class="foldBlock-title">
      <node-view-content />
    </div>
  </node-view-wrapper>
</template>
<script lang="ts" setup>
import { NodeViewContent, NodeViewWrapper } from '@tiptap/vue-3';
</script>

<style lang="scss" scoped>

//Add your style!

</style>

FoldBlockContent Child Component Extension:

import CalloutContent from '@datawhale/new-editor/components/FoldBlockContent.vue';
import { Node, mergeAttributes } from '@tiptap/core';
import { VueNodeViewRenderer } from '@tiptap/vue-3';

export default Node.create({
  name: 'foldBlockContent',
  group: 'block',
  content: 'block+',
  parseHTML() {
    return [
      {
        tag: 'foldBlockContent',
      },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return ['foldBlockContent', mergeAttributes(HTMLAttributes), 0];
  },
  addNodeView() {
    // @ts-expect-error tiptap-fix
    return VueNodeViewRenderer(CalloutContent);
  },
});

FoldBlockContent Child Component:

<template>
  <node-view-wrapper class="foldBlock-content">
    <node-view-content />
  </node-view-wrapper>
</template>

<script setup lang="ts">
import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-3';
</script>

<style scoped>

//Add your style!

</style>

---

Control Logic Between Components

For the collapsible block, only one button is needed to control whether foldBlockContent is collapsed or not. However, the components inside <node-view-content> are not in the parent component, but are filled in by prosemirror, so props and provide/inject/emit will be invalid.

Solution: Introduce a dynamic class: <node-view-content :class="isFolded ? 'is-folded' : 'not-folded'" />, and then control whether to display it by using CSS selectors in the child components.

At this point, a simple collapsible block function can be implemented. You can edit the content in the title and content sections separately, and you can also collapse the content. Other similar functions can refer to the implementation logic here.

Type

Document Editor with Collaboration

Other

No response