Open flatsiedatsie opened 3 months ago
Another attempt. I'm not seeing any errors now, but I'm also not seeing an editor being generated?
<!doctype html>
<html class="auto">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<title>ink-mde</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@300;400;700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<style>
* {
box-sizing: border-box;
}
body, :host {
--ink-font-family: 'Inter', Helvetica, sans-serif;
--ink-code-font-family: 'Fira Code', monospace;
margin: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="editor">Hello world</div>
<textarea>Hello world</textarea>
<!--
<script type="module" src="./examples/web-component.ts"></script>
-->
<script type="importmap">
{
"imports": {
"solid-js/web": "/ink/node_modules/solid-js/web/dist/web.js",
"solid-js": "/ink/node_modules/solid-js/dist/solid.js",
"@codemirror/commands": "/ink/node_modules/@codemirror/commands/dist/index.js",
"@codemirror/view": "/ink/node_modules/@codemirror/view/dist/index.js",
"@codemirror/lang-markdown": "/ink/node_modules/@codemirror/lang-markdown/dist/index.js",
"@codemirror/lang-html": "/ink/node_modules/@codemirror/lang-html/dist/index.js",
"@codemirror/lang-javascript": "/ink/node_modules/@codemirror/lang-javascript/dist/index.js",
"@codemirror/lang-css": "/ink/node_modules/@codemirror/lang-css/dist/index.js",
"@codemirror/language": "/ink/node_modules/@codemirror/language/dist/index.js",
"@codemirror/highlight": "/ink/node_modules/@codemirror/highlight/dist/index.js",
"@codemirror/state": "/ink/node_modules/@codemirror/state/dist/index.js",
"@codemirror/language-data": "/ink/node_modules/@codemirror/language-data/dist/index.js",
"@codemirror/autocomplete": "/ink/node_modules/@codemirror/autocomplete/dist/index.js",
"@codemirror/": "/ink/node_modules/@codemirror/",
"@lezer/highlight": "/ink/node_modules/@lezer/highlight/dist/index.js",
"@lezer/common": "/ink/node_modules/@lezer/common/dist/index.js",
"@lezer/autocomplete": "/ink/node_modules/@lezer/autocomplete/dist/index.js",
"@lezer/lang-html": "/ink/node_modules/@lezer/lang-html/dist/index.js",
"@lezer/markdown": "/ink/node_modules/@lezer/markdown/dist/index.js",
"@lezer/html": "/ink/node_modules/@lezer/html/dist/index.js",
"@lezer/lr": "/ink/node_modules/@lezer/lr/dist/index.js",
"@lezer/javascript": "/ink/node_modules/@lezer/javascript/dist/index.js",
"@lezer/css": "/ink/node_modules/@lezer/css/dist/index.js",
"style-mod": "/ink/node_modules/style-mod/src/style-mod.js",
"w3c-keyname": "/ink/node_modules/w3c-keyname/index.js"
}
}
</script>
<script type="module">
// "style-mod": "/ink/node_modules/style-mod/dist/style-mod.cjs",
import { defineOptions, ink } from './dist/index.js';
console.log("ink: ", ink);
// The only requirement is an HTML element.
let editor_el = document.getElementById('editor');
// With hooks, you can keep your state in sync with the editor.
const state = { doc: '# Start with some text' }
// Use defineOptions for automatic type hinting.
const options = defineOptions({
doc: state.doc,
hooks: {
afterUpdate: (doc) => {
state.doc = doc
},
},
})
// const editor =
ink(editor_el, options)
.then((value) => {
console.log('value from ink: ', value);
//value.update(state.doc);
const doc_contents = value.getDoc();
console.log("doc_contents: ", doc_contents);
})
.catch((err) => {
console.error("caught an error from ink: ", err);
})
console.log("editor: ", editor);
// You can also update the editor directly.
//editor.update(state.doc);
</script>
</body>
</html>
// seeing an error now though:
~Are you sure you are using svelte or vue?~
No, I'm using neither of those. Should I?
edit: i don't think so
issue seems to be here: https://github.com/davidmyersdev/ink-mde/blob/8591933fd70e89e9850a9766d12ef16b826b0837/src/editor/state.ts#L27
Wrapping it around a textarea makes the textarea undefined.
Summary
My code is literally this inside some boilerplate HTML:
This results in the following error: