refactor some attributes to new syntax

docs/src/demos/Extensions/OrderedList/index.vue

@@ -38,10 +38,15 @@ export default {
         ListItem(),
       ],
       content: `
-        <ul>
+        <ol>
           <li>A list item</li>
           <li>And another one</li>
-        </ul>
+        </ol>
+
+        <ol start="5">
+          <li>This item starts at 5</li>
+          <li>And another one</li>
+        </ol>
       `,
     })
   },

packages/extension-code-block/index.ts

@@ -29,7 +29,28 @@ const CodeBlock = createNode({
     return {
       language: {
         default: null,
-        rendered: false,
+        parseHTML: element => {
+          const classAttribute = element.firstElementChild?.getAttribute('class')
+
+          if (!classAttribute) {
+            return null
+          }
+
+          const regexLanguageClassPrefix = new RegExp(`^(${this.options.languageClassPrefix})`)
+
+          return {
+            language: classAttribute.replace(regexLanguageClassPrefix, ''),
+          }
+        },
+        renderHTML: attributes => {
+          if (!attributes.language) {
+            return null
+          }
+
+          return {
+            class: this.options.languageClassPrefix + attributes.language,
+          }
+        },
       },
     }
   },
@@ -39,25 +60,12 @@ const CodeBlock = createNode({
       {
         tag: 'pre',
         preserveWhitespace: 'full',
-        getAttrs: node => {
-          const classAttribute = (node as Element).firstElementChild?.getAttribute('class')
-
-          if (!classAttribute) {
-            return null
-          }
-
-          const regexLanguageClassPrefix = new RegExp(`^(${this.options.languageClassPrefix})`)
-
-          return { language: classAttribute.replace(regexLanguageClassPrefix, '') }
-        },
       },
     ]
   },
 
-  renderHTML({ node, attributes }) {
+  renderHTML({ attributes }) {
-    return ['pre', attributes, ['code', {
+    return ['pre', ['code', attributes, 0]]
-      class: node.attrs.language && this.options.languageClassPrefix + node.attrs.language,
-    }, 0]]
   },
 
   addCommands() {

packages/extension-ordered-list/index.ts

@@ -10,9 +10,13 @@ const OrderedList = createNode({
 
   addAttributes() {
     return {
-      order: {
+      start: {
         default: 1,
-        rendered: false,
+        parseHTML: element => ({
+          start: element.hasAttribute('start')
+            ? parseInt(element.getAttribute('start') || '', 10)
+            : 1,
+        }),
       },
     }
   },
@@ -21,19 +25,16 @@ const OrderedList = createNode({
     return [
       {
         tag: 'ol',
-        getAttrs: node => ({
-          order: (node as HTMLElement).hasAttribute('start')
-            ? parseInt((node as HTMLElement).getAttribute('start') || '', 10)
-            : 1,
-        }),
       },
     ]
   },
 
-  renderHTML({ node, attributes }) {
+  renderHTML({ attributes }) {
-    return node.attrs.order === 1
+    const { start, ...attributesWithoutStart } = attributes
-      ? ['ol', attributes, 0]
+
-      : ['ol', { ...attributes, start: node.attrs.order }, 0]
+    return start === 1
+      ? ['ol', attributesWithoutStart, 0]
+      : ['ol', attributes, 0]
   },
 
   addCommands() {