Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with custom nodes #6766

Open
Small-Systems opened this issue Oct 21, 2024 · 0 comments
Open

Problem with custom nodes #6766

Small-Systems opened this issue Oct 21, 2024 · 0 comments

Comments

@Small-Systems
Copy link

Description

Theoretically we can add custom nodes to the writer field.
The docs are vague about what kind of tags it is possible to add with a node. It seems that it is not possible to add/use the <p> tag with a custom class. The docs give an example about resolving competing marks, but it seems that with a priority below 50 the custom node (with class) is removed, and anything above 50 results in strange behavior where the node gets moved/mashed/added elsewhere once parsed.

Expected behavior
Select a paragraph and apply custom node. Paragraph should now have the class of the custom node.
When page is refreshed the paragraph should still have the class of the custom node, and other nodes should remain the same.

Screenshots
Applying the custom node here, everything seems ok before saving and refreshing the page:
Screenshot 2024-10-21 at 20 16 18

Once the page is saved and refreshed the custom node gets added to all <p> tags if the priority is set above 50:
Screenshot 2024-10-21 at 20 16 38

To reproduce

Create a custom node plugin:

window.panel.plugin("vuek/extensions", {
  writerNodes: {
    centered: {
      get button() {
        return {
          icon: "text-center",
          label: "Centered Link",
        };
      },

      commands({ type, utils }) {
        return () => utils.toggleWrap(type);
      },

      get name() {
        return "Centered";
      },

      get schema() {
        return {
          content: "block+",
          group: "block",
          draggable: false,
          parseDOM: [
            {
              tag: "p",
              priority: 51,
              getAttrs: () => {
                return {
                  class: "centerLink",
                };
              },
            },
          ],
          toDOM: () => [
            "p",
            {
              class: "centerLink",
            },
            0,
          ],
        };
      },
    },
  },
});

Your setup

4.4.1

Your system (please complete the following information)

  • Device: macbook air M2, 2022
  • OS: macOS 14.6.1
  • Browser: Firefox
  • Version: 131.0.3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant