Revert "Prevent raw extra attributes being rendered to the DOM" (#774)

This reverts commit 47d10a8.
remirror · Nov 12, 2020 · 3ee354d · 3ee354d · github-actions · Nov 12, 2020
1 parent 47d10a8
commit 3ee354d
Show file tree

Hide file tree

Showing 10 changed files with 9 additions and 58 deletions.
diff --git a/docs/concepts/extra-attributes.md b/docs/concepts/extra-attributes.md
@@ -52,24 +52,6 @@ const paragraphExtension = new ParagraphExtension({
 
 This example accomplishes the same things as the previous example and remirror is smart enough to automatically parse the dom and write to the dom the required values.
 
-### Render as data attributes
-
-You can return an array of a key value pair, to determine how your extra attribute is rendered in the DOM.
-
-```ts
-import { ParagraphExtension } from 'remirror/extension/paragraph';
-
-const paragraphExtension = new ParagraphExtension({
-  extraAttributes: {
-    custom: {
-      default: 'my default',
-      parseDOM: (dom) => dom.getAttribute('data-custom'),
-      toDOM: (attrs) => ['data-custom', attrs.custom],
-    },
-  },
-});
-```
-
 ## RemirrorManager
 
 Extra attributes can also be added via the `RemirrorManager`. This can set attributes for a collection of nodes, marks and tags. This is very useful when adding attributes to multiple places in one sweep.

diff --git a/packages/@remirror/core-utils/src/core-utils.ts b/packages/@remirror/core-utils/src/core-utils.ts
@@ -10,21 +10,17 @@ import {
   isObject,
   isString,
   keys,
-  omit,
   sort,
   unset,
 } from '@remirror/core-helpers';
 import type {
   AnchorHeadParameter,
   AnyConstructor,
-  ApplySchemaAttributes,
-  DOMCompatibleAttributes,
   EditorSchema,
   EditorState,
   FromToParameter,
   MarkAttributes,
   MarkTypeParameter,
-  NodeAttributes,
   PrimitiveSelection,
   ProsemirrorNode,
   ProsemirrorNodeParameter,
@@ -1066,20 +1062,6 @@ export function areSchemasCompatible(schemaA: EditorSchema, schemaB: EditorSchem
   return true;
 }
 
-/**
- * Returns attributes for a node excluding those that were provided as extra attributes
- *
- * @param attrs - The source attributes
- * @param extra - The extra attribute schema for this node
- */
-export function omitExtraAttributes(
-  attrs: NodeAttributes,
-  extra: ApplySchemaAttributes,
-): DOMCompatibleAttributes {
-  const extraAttributeNames = keys(extra.defaults());
-  return omit({ ...attrs }, extraAttributeNames) as DOMCompatibleAttributes;
-}
-
 /**
  * A description of an invalid content block (representing a node or a mark).
  */

diff --git a/packages/@remirror/core-utils/src/index.ts b/packages/@remirror/core-utils/src/index.ts
@@ -65,7 +65,6 @@ export {
   isTransaction,
   shouldUseDomEnvironment,
   startPositionOfParent,
-  omitExtraAttributes,
   toDom,
   toHtml,
   getChangedRanges,

diff --git a/packages/@remirror/core/src/builtins/schema-extension.ts b/packages/@remirror/core/src/builtins/schema-extension.ts
@@ -76,7 +76,7 @@ import type { CombinedTags } from './tags-extension';
  *         awesome: {
  *           default: 'awesome',
  *           parseDOM: (domNode) => domNode.getAttribute('data-awesome'),
- *           toDOM: (attrs) => ([ 'data-awesome', attrs.awesome ])
+ *           toDOM: (node) => ({ 'data-awesome': node.attrs.awesome })
  *         },
  *       },
  *     },
@@ -857,8 +857,7 @@ function createToDOM(extraAttributes: SchemaAttributes, shouldIgnore: boolean) {
       }
 
       if (isArray(value)) {
-        const [attr, val] = value;
-        domAttributes[attr] = val ?? (item.attrs[name] as string);
+        domAttributes[value[0]] = value[1] ?? (item.attrs[name] as string);
       }
 
       return;

diff --git a/packages/@remirror/extension-auto-link/src/auto-link-extension.ts b/packages/@remirror/extension-auto-link/src/auto-link-extension.ts
@@ -19,7 +19,6 @@ import {
   markPasteRule,
   MarkType,
   MarkTypeParameter,
-  omitExtraAttributes,
   ProsemirrorPlugin,
   Static,
   TransactionParameter,
@@ -69,12 +68,11 @@ export class AutoLinkExtension extends MarkExtension<AutoLinkOptions> {
         },
       ],
       toDOM: (node) => {
-        const attrs = omitExtraAttributes(node.attrs, extra);
         return [
           'a',
           {
             ...extra.dom(node),
-            ...attrs,
+            ...node.attrs,
             role: 'presentation',
           },
           0,

diff --git a/packages/@remirror/extension-callout/src/callout-extension.ts b/packages/@remirror/extension-callout/src/callout-extension.ts
@@ -8,7 +8,6 @@ import {
   KeyBindings,
   NodeExtension,
   NodeExtensionSpec,
-  omitExtraAttributes,
   toggleWrap,
 } from '@remirror/core';
 import { TextSelection } from '@remirror/pm/state';
@@ -55,7 +54,7 @@ export class CalloutExtension extends NodeExtension<CalloutOptions> {
         },
       ],
       toDOM: (node) => {
-        const { type, ...rest } = omitExtraAttributes(node.attrs, extra) as CalloutAttributes;
+        const { type, ...rest } = node.attrs as CalloutAttributes;
         const attributes = { ...extra.dom(node), ...rest, [dataAttributeType]: type };
 
         return ['div', attributes, 0];

diff --git a/packages/@remirror/extension-image/src/image-extension.ts b/packages/@remirror/extension-image/src/image-extension.ts
@@ -10,7 +10,6 @@ import {
   NodeAttributes,
   NodeExtension,
   NodeExtensionSpec,
-  omitExtraAttributes,
 } from '@remirror/core';
 import type { ResolvedPos } from '@remirror/pm/model';
 
@@ -58,8 +57,7 @@ export class ImageExtension extends NodeExtension {
         },
       ],
       toDOM: (node) => {
-        const attrs = omitExtraAttributes(node.attrs, extra);
-        return ['img', { ...extra.dom(node), ...attrs }];
+        return ['img', { ...extra.dom(node), ...node.attrs }];
       },
     };
   }

diff --git a/packages/@remirror/extension-link/src/link-extension.ts b/packages/@remirror/extension-link/src/link-extension.ts
@@ -22,7 +22,6 @@ import {
   MarkExtension,
   MarkExtensionSpec,
   markPasteRule,
-  omitExtraAttributes,
   OnSetOptionsParameter,
   preserveSelection,
   ProsemirrorNode,
@@ -153,7 +152,7 @@ export class LinkExtension extends MarkExtension<LinkOptions> {
         },
       ],
       toDOM: (node) => {
-        const { auto: _, ...rest } = omitExtraAttributes(node.attrs, extra);
+        const { auto: _, ...rest } = node.attrs;
         const auto = node.attrs.auto ? { [AUTO_ATTRIBUTE]: '' } : {};
         const rel = 'noopener noreferrer nofollow';
         const attrs = { ...extra.dom(node), ...rest, rel, ...auto };

diff --git a/packages/@remirror/extension-mention-atom/src/mention-atom-extension.ts b/packages/@remirror/extension-mention-atom/src/mention-atom-extension.ts
@@ -12,7 +12,6 @@ import {
   NodeAttributes,
   NodeExtension,
   NodeExtensionSpec,
-  omitExtraAttributes,
   pick,
   replaceText,
   Static,
@@ -151,7 +150,7 @@ export class MentionAtomExtension extends NodeExtension<MentionAtomOptions> {
           name,
           range,
           ...rest
-        } = omitExtraAttributes(node.attrs, extra) as NamedMentionAtomNodeAttributes;
+        } = node.attrs as NamedMentionAtomNodeAttributes;
         const matcher = this.options.matchers.find((matcher) => matcher.name === name);
 
         const mentionClassName = matcher

diff --git a/packages/@remirror/preset-embed/src/iframe-extension.ts b/packages/@remirror/preset-embed/src/iframe-extension.ts
@@ -10,7 +10,6 @@ import {
   NodeExtension,
   NodeExtensionSpec,
   object,
-  omitExtraAttributes,
   ProsemirrorAttributes,
   Shape,
   Static,
@@ -89,10 +88,7 @@ export class IframeExtension extends NodeExtension<IframeOptions> {
         },
       ],
       toDOM: (node) => {
-        const { frameBorder, allowFullScreen, src, type, ...rest } = omitExtraAttributes(
-          node.attrs,
-          extra,
-        );
+        const { frameBorder, allowFullScreen, src, type, ...rest } = node.attrs;
         const { class: className } = this.options;
 
         return [
@@ -104,7 +100,7 @@ export class IframeExtension extends NodeExtension<IframeOptions> {
             src,
             'data-embed-type': type,
             allowfullscreen: allowFullScreen ? 'true' : 'false',
-            frameBorder: frameBorder?.toString(),
+            frameBorder: frameBorder.toString(),
           },
         ];
       },