WIP custom element

.eslintrc

@@ -7,6 +7,8 @@
         "jest/require-hook": "off",
         "import/extensions": "off",
         "import/no-unresolved": "off",
-        "unicorn/no-null": "off"
+        "unicorn/no-null": "off",
+        "@typescript-eslint/member-ordering": "off",
+        "@typescript-eslint/explicit-member-accessibility": "off"
     }
 }

package.json

@@ -30,26 +30,24 @@
         "format": "prettier --write . && eslint --fix ."
     },
     "dependencies": {
-        "@codemirror/lang-markdown": "^6.1.1",
-        "@codemirror/language": "^6.6.0",
-        "@codemirror/state": "^6.2.0",
-        "@codemirror/view": "^6.10.0",
-        "@lezer/highlight": "^1.1.4",
-        "@lezer/markdown": "^1.0.2",
+        "@codemirror/lang-markdown": "^6.2.5",
+        "@codemirror/language": "^6.10.2",
+        "@codemirror/state": "^6.4.1",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/highlight": "^1.2.0",
+        "@lezer/markdown": "^1.3.0",
         "escape-string-regexp": "^5.0.0",
-        "marked": "^4.3.0"
+        "marked": "^12.0.2"
     },
     "devDependencies": {
         "@ionaru/eslint-config": "^9.2.1-53.0",
-        "@rollup/plugin-node-resolve": "^15.0.2",
-        "@rollup/plugin-terser": "^0.4.1",
-        "@rollup/plugin-typescript": "^11.1.0",
-        "@types/marked": "^4.0.8",
-        "@types/node": "^18.16.2",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^11.1.6",
+        "@types/node": "^20.14.2",
         "@typescript-eslint/eslint-plugin": "^5.59.1",
-        "@vitest/coverage-c8": "^0.30.1",
-        "@vitest/coverage-v8": "^0.34.6",
-        "@vitest/ui": "^0.30.1",
+        "@vitest/coverage-v8": "^1.6.0",
+        "@vitest/ui": "^1.6.0",
         "cypress": "^12.11.0",
         "eslint": "^8.39.0",
         "eslint-config-prettier": "^8.8.0",
@@ -58,14 +56,14 @@
         "eslint-plugin-prefer-arrow": "^1.2.3",
         "eslint-plugin-sonarjs": "^0.19.0",
         "eslint-plugin-unicorn": "^46.0.0",
-        "jsdom": "^21.1.1",
-        "prettier": "^2.8.8",
-        "rollup": "^3.21.0",
+        "jsdom": "^24.1.0",
+        "prettier": "^3.3.1",
+        "rollup": "^4.18.0",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-scss": "^4.0.0",
-        "sass": "^1.62.1",
-        "tslib": "^2.5.0",
-        "typescript": "^5.0.4",
-        "vitest": "^0.34.6"
+        "sass": "^1.77.4",
+        "tslib": "^2.6.3",
+        "typescript": "^5.4.5",
+        "vitest": "^1.6.0"
     }
 }

rollup.config.js

@@ -24,5 +24,5 @@ export default [
             typescript(),
             terser(),
         ],
-    },
+    }
 ];

src/index.ts

@@ -1,2 +1,30 @@
 export { EasyMDE } from './easymde';
 export * from './imports';
+
+export class EasyMarkdownEditor extends HTMLElement {
+
+    name = 'World';
+
+    constructor() {
+        super();
+        this.name = 'World';
+    }
+
+    connectedCallback() {
+        const shadow = this.attachShadow({ mode: 'closed' });
+        shadow.innerHTML = 'Hello World!' + this.name;
+    }
+
+    static get observedAttributes() {
+        return ['name'];
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (name === 'name') {
+            this.name = newValue;
+        }
+        console.log('Attribute Changed', name, oldValue, newValue);
+    }
+}
+
+customElements.define( 'easy-markdown-editor', EasyMarkdownEditor );

src/options.ts

@@ -1,4 +1,4 @@
-import { marked } from 'marked';
+import { MarkedOptions } from 'marked';
 
 import { EasyMDE } from './easymde';
 
@@ -78,7 +78,7 @@ interface PromptTexts {
 interface RenderingOptions {
     codeSyntaxHighlighting?: boolean;
     hljs?: any;
-    markedOptions?: marked.MarkedOptions;
+    markedOptions?: MarkedOptions;
     sanitizerFunction?: (html: string) => string;
     singleLineBreaks?: boolean;
 }

test/index.html

@@ -70,5 +70,10 @@ This is a longer sentence!
             // document.getElementById('custom-toolbar-container').appendChild(toolbar.element);
             // window.x.destruct();
         </script>
+
+    <easy-markdown-editor name="meow"></easy-markdown-editor>
+    <script>
+        document.querySelector('easy-markdown-editor').setAttribute('name', 'Everyone');
+    </script>
     </body>
 </html>