Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Having trouble starting a minimal example. #87

Open
flatsiedatsie opened this issue May 15, 2024 · 4 comments
Open

Having trouble starting a minimal example. #87

flatsiedatsie opened this issue May 15, 2024 · 4 comments

Comments

@flatsiedatsie
Copy link

Summary

My code is literally this inside some boilerplate HTML:

  <div id="editor"></div>
  <script type="module">
	  import { ink } from 'https://esm.sh/[email protected]';
	  ink(document.getElementById('editor')!);
  </script>

This results in the following error:

Screenshot 2024-05-15 at 20 10 24
@flatsiedatsie
Copy link
Author

flatsiedatsie commented May 29, 2024 •
edited

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/[email protected]/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:

Screenshot 2024-05-29 at 10 56 02

@tiagorangel2011
Copy link

Are you sure you are using svelte or vue?

@flatsiedatsie
Copy link
Author

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

@flatsiedatsie flatsiedatsie mentioned this issue Jun 6, 2024
Open
@tiagorangel2011
Copy link

tiagorangel2011 commented Jun 9, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@flatsiedatsie @tiagorangel2011