Skip to content

Instantly share code, notes, and snippets.

@shreevatsa

shreevatsa/Makefile Secret

Created October 12, 2022 04:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shreevatsa/12c8e412439ce2bb181fb2f554ac600d to your computer and use it in GitHub Desktop.
Save shreevatsa/12c8e412439ce2bb181fb2f554ac600d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" href="data:,">
<link rel="stylesheet" type="text/css" href="gen/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prosemirror-view@1.27.0/style/prosemirror.css">
<script type="module" src="gen/proofer_bundle.js"></script>
<script src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js" defer></script>
</head>
<body class="flex flex-col">
<p>In the console, run <code>view.dispatch(view.state.tr)</code></p>
<form id="prooferForm" x-data="proofer" method="POST">
<div id="editor" class="p-4 grow w-full h-[90vh]"></div>
</form>
</body>
</html>
Raw
Makefile
all:
npm install
npx esbuild proofer.js --outfile=gen/proofer_bundle.js --bundle
npx tailwindcss -i style.css -o gen/style.css
Raw
package.json
{
"dependencies": {
"esbuild": "^0.15.5",
"postcss": "^8.4.14",
"prosemirror-commands": "^1.3.0",
"prosemirror-history": "^1.3.0",
"prosemirror-keymap": "^1.2.0",
"prosemirror-model": "^1.18.1",
"prosemirror-state": "^1.4.1",
"prosemirror-view": "^1.27.2",
"tailwindcss": "^3.1.8",
"typescript": "^4.8.2"
}
}
Raw
pm-editor.ts
import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { DOMOutputSpec, Schema } from 'prosemirror-model';
import { keymap } from 'prosemirror-keymap';
import { undo, redo, history } from 'prosemirror-history';
import { baseKeymap } from 'prosemirror-commands';
const schema = new Schema({
nodes: {
// The document (page) is a nonempty sequence of lines.
doc: { content: 'line+' },
// A line contains text. Represented in the DOM as a `<p>` element.
line: {
content: 'text*',
parseDOM: [{ tag: 'p' }],
toDOM() { return ['p', 0] as DOMOutputSpec; },
},
text: { inline: true },
},
});
// Creates editor with contents from `text`, appends it to `parentNode`. Returns its EditorView.
export function createEditorAt(parentNode: HTMLElement): EditorView {
const state = EditorState.create({
schema: schema,
plugins: [
history(),
keymap({ 'Mod-z': undo, 'Mod-y': redo }),
keymap(baseKeymap),
],
});
// Display the editor.
return new EditorView(parentNode, { state });
}
Raw
proofer.js
import { createEditorAt } from './pm-editor.ts';
export const Proofer = () => ({
init() {
this.view = createEditorAt(document.getElementById('editor'));
window.view = this.view;
},
});
window.addEventListener('alpine:init', () => {
Alpine.data('proofer', Proofer);
});
Raw
style.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
.ProseMirror {
padding: 4px 8px;
height: 100%;
}
Raw
tailwind.config.js
module.exports = {
content: [
'*.js',
'*.html',
],
plugins: [
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment