Having trouble starting a minimal example.

flatsiedatsie commented 6 months ago

Summary

My code is literally this inside some boilerplate HTML:

  <div id="editor"></div>
  <script type="module">
      import { ink } from 'https://esm.sh/ink-mde@0.22.0';
      ink(document.getElementById('editor')!);
  </script>

This results in the following error:

flatsiedatsie commented 5 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:

tiagorangel1 commented 5 months ago

~Are you sure you are using svelte or vue?~

flatsiedatsie commented 5 months ago

No, I'm using neither of those. Should I?

tiagorangel1 commented 4 months ago

edit: i don't think so

issue seems to be here: https://github.com/davidmyersdev/ink-mde/blob/8591933fd70e89e9850a9766d12ef16b826b0837/src/editor/state.ts#L27

tiagorangel1 commented 4 months ago

Wrapping it around a textarea makes the textarea undefined.

davidmyersdev / ink-mde

Having trouble starting a minimal example. #87

Summary