mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-04-06 10:46:57 +00:00
feat: add css from prosemirror-view and prosemirror-menu
This commit is contained in:
linonetwo
parent
685520aa88
commit
06a8751939
24
plugins/tiddlywiki/prosemirror/development.tid
Executable file
24
plugins/tiddlywiki/prosemirror/development.tid
Executable file
@ -0,0 +1,24 @@
|
||||
title: $:/plugins/tiddlywiki/prosemirror/development
|
||||
|
||||
Downloaded from JsDelivr CDN (like `https://cdn.jsdelivr.net/npm/prosemirror-state@latest/dist/index.cjs` and store as `prosemirror-state.js`):
|
||||
|
||||
* [ext[prosemirror-state|https://cdn.jsdelivr.net/npm/prosemirror-state@latest/dist/index.cjs]]: v1.4.3
|
||||
* [ext[prosemirror-view|https://cdn.jsdelivr.net/npm/prosemirror-view@latest/dist/index.cjs]]: v1.38.1
|
||||
** [ext[prosemirror.css|https://cdn.jsdelivr.net/npm/prosemirror-view@latest/style/prosemirror.css]]
|
||||
* [ext[prosemirror-model|https://cdn.jsdelivr.net/npm/prosemirror-model@latest/dist/index.cjs]]: v1.25.0
|
||||
* [ext[prosemirror-schema-basic|https://cdn.jsdelivr.net/npm/prosemirror-schema-basic@latest/dist/index.cjs]]: v1.2.4
|
||||
* [ext[prosemirror-schema-list|https://cdn.jsdelivr.net/npm/prosemirror-schema-list@latest/dist/index.cjs]]: v1.5.1
|
||||
* [ext[prosemirror-example-setup|https://cdn.jsdelivr.net/npm/prosemirror-example-setup@latest/dist/index.cjs]]: v1.2.3
|
||||
* [ext[orderedmap|https://cdn.jsdelivr.net/npm/orderedmap@latest/dist/index.cjs]]: v2.1.1
|
||||
* [ext[prosemirror-transform|https://cdn.jsdelivr.net/npm/prosemirror-transform@latest/dist/index.cjs]]: v1.10.3
|
||||
* [ext[prosemirror-keymap|https://cdn.jsdelivr.net/npm/prosemirror-keymap@latest/dist/index.cjs]]: v1.2.2
|
||||
* [ext[prosemirror-history|https://cdn.jsdelivr.net/npm/prosemirror-history@latest/dist/index.cjs]]: v1.4.1
|
||||
* [ext[prosemirror-commands|https://cdn.jsdelivr.net/npm/prosemirror-commands@latest/dist/index.cjs]]: v1.7.0
|
||||
* [ext[prosemirror-dropcursor|https://cdn.jsdelivr.net/npm/prosemirror-dropcursor@latest/dist/index.cjs]]: v1.8.1
|
||||
* [ext[prosemirror-gapcursor|https://cdn.jsdelivr.net/npm/prosemirror-gapcursor@latest/dist/index.cjs]]: v1.3.2
|
||||
* [ext[prosemirror-menu|https://cdn.jsdelivr.net/npm/prosemirror-menu@latest/dist/index.cjs]]: v1.2.4
|
||||
** [ext[menu.css|https://cdn.jsdelivr.net/npm/prosemirror-menu@latest/style/menu.css]]
|
||||
* [ext[prosemirror-inputrules|https://cdn.jsdelivr.net/npm/prosemirror-inputrules@latest/dist/index.cjs]]: v1.5.0
|
||||
* [ext[w3c-keyname|https://cdn.jsdelivr.net/npm/w3c-keyname@latest/dist/index.cjs]]: v2.2.8
|
||||
* [ext[crelt|https://cdn.jsdelivr.net/npm/crelt@latest/dist/index.cjs]]: v1.0.6
|
||||
* [ext[rope-sequence|https://cdn.jsdelivr.net/npm/rope-sequence@latest/dist/index.cjs]]: v1.3.4
|
||||
148
plugins/tiddlywiki/prosemirror/files/menu.css
Normal file
148
plugins/tiddlywiki/prosemirror/files/menu.css
Normal file
@ -0,0 +1,148 @@
|
||||
.ProseMirror-textblock-dropdown {
|
||||
min-width: 3em;
|
||||
}
|
||||
|
||||
.ProseMirror-menu {
|
||||
margin: 0 -4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ProseMirror-tooltip .ProseMirror-menu {
|
||||
width: -webkit-fit-content;
|
||||
width: fit-content;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.ProseMirror-menuitem {
|
||||
margin-right: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ProseMirror-menuseparator {
|
||||
border-right: 1px solid #ddd;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-dropdown {
|
||||
vertical-align: 1px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-dropdown-wrap {
|
||||
padding: 1px 0 1px 4px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-dropdown:after {
|
||||
content: "";
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid currentColor;
|
||||
opacity: .6;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: calc(50% - 2px);
|
||||
}
|
||||
|
||||
.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {
|
||||
position: absolute;
|
||||
background: white;
|
||||
color: #666;
|
||||
border: 1px solid #aaa;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-dropdown-menu {
|
||||
z-index: 15;
|
||||
min-width: 6em;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-dropdown-item {
|
||||
cursor: pointer;
|
||||
padding: 2px 8px 2px 4px;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-dropdown-item:hover {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-submenu-wrap {
|
||||
position: relative;
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-submenu-label:after {
|
||||
content: "";
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 4px solid currentColor;
|
||||
opacity: .6;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: calc(50% - 4px);
|
||||
}
|
||||
|
||||
.ProseMirror-menu-submenu {
|
||||
display: none;
|
||||
min-width: 4em;
|
||||
left: 100%;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-active {
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-disabled {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ProseMirror-menubar {
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
position: relative;
|
||||
min-height: 1em;
|
||||
color: #666;
|
||||
padding: 1px 6px;
|
||||
top: 0; left: 0; right: 0;
|
||||
border-bottom: 1px solid silver;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.ProseMirror-icon {
|
||||
display: inline-block;
|
||||
line-height: .8;
|
||||
vertical-align: -2px; /* Compensate for padding */
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ProseMirror-menu-disabled.ProseMirror-icon {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ProseMirror-icon svg {
|
||||
fill: currentColor;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.ProseMirror-icon span {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
54
plugins/tiddlywiki/prosemirror/files/prosemirror.css
Normal file
54
plugins/tiddlywiki/prosemirror/files/prosemirror.css
Normal file
@ -0,0 +1,54 @@
|
||||
.ProseMirror {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ProseMirror {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
white-space: break-spaces;
|
||||
-webkit-font-variant-ligatures: none;
|
||||
font-variant-ligatures: none;
|
||||
font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
|
||||
}
|
||||
|
||||
.ProseMirror pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.ProseMirror li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ProseMirror-hideselection *::selection { background: transparent; }
|
||||
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
|
||||
.ProseMirror-hideselection { caret-color: transparent; }
|
||||
|
||||
/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
|
||||
.ProseMirror [draggable][contenteditable=false] { user-select: text }
|
||||
|
||||
.ProseMirror-selectednode {
|
||||
outline: 2px solid #8cf;
|
||||
}
|
||||
|
||||
/* Make sure li selections wrap around markers */
|
||||
|
||||
li.ProseMirror-selectednode {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
li.ProseMirror-selectednode:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
right: -2px; top: -2px; bottom: -2px;
|
||||
border: 2px solid #8cf;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Protect against generic img rules */
|
||||
|
||||
img.ProseMirror-separator {
|
||||
display: inline !important;
|
||||
border: none !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
@ -21,6 +21,13 @@
|
||||
"title": "prosemirror-view",
|
||||
"module-type": "library"
|
||||
}
|
||||
},{
|
||||
"file": "prosemirror.css",
|
||||
"fields": {
|
||||
"type": "text/css",
|
||||
"title": "$:/plugins/tiddlywiki/prosemirror/lib/prosemirror.css",
|
||||
"tags": "[[$:/tags/Stylesheet]]"
|
||||
}
|
||||
},{
|
||||
"file": "prosemirror-schema-list.cjs",
|
||||
"fields": {
|
||||
@ -107,6 +114,14 @@
|
||||
"module-type": "library"
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "menu.css",
|
||||
"fields": {
|
||||
"type": "text/css",
|
||||
"title": "$:/plugins/tiddlywiki/prosemirror/lib/menu.css",
|
||||
"tags": "[[$:/tags/Stylesheet]]"
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "prosemirror-inputrules.cjs",
|
||||
"fields": {
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
"title": "$:/plugins/tiddlywiki/prosemirror",
|
||||
"name": "Prosemirror Visual Editor",
|
||||
"description": "WYSIWYG editor (What You See Is What You Get) for TiddlyWiki",
|
||||
"list": "readme",
|
||||
"list": "readme development tree",
|
||||
"stability": "STABILITY_1_EXPERIMENTAL"
|
||||
}
|
||||
|
||||
@ -1,26 +1,5 @@
|
||||
title: $:/plugins/tiddlywiki/prosemirror/readme
|
||||
|
||||
Test Test
|
||||
Test `<$prosemirror />`, see console for content JSON.
|
||||
|
||||
<$prosemirror />
|
||||
|
||||
Downloaded from JsDelivr CDN (like `https://cdn.jsdelivr.net/npm/prosemirror-state@latest/dist/index.cjs` and store as `prosemirror-state.js`):
|
||||
|
||||
* [ext[prosemirror-state|https://cdn.jsdelivr.net/npm/prosemirror-state@latest/dist/index.cjs]]: v1.4.3
|
||||
* [ext[prosemirror-view|https://cdn.jsdelivr.net/npm/prosemirror-view@latest/dist/index.cjs]]: v1.38.1
|
||||
* [ext[prosemirror-model|https://cdn.jsdelivr.net/npm/prosemirror-model@latest/dist/index.cjs]]: v1.25.0
|
||||
* [ext[prosemirror-schema-basic|https://cdn.jsdelivr.net/npm/prosemirror-schema-basic@latest/dist/index.cjs]]: v1.2.4
|
||||
* [ext[prosemirror-schema-list|https://cdn.jsdelivr.net/npm/prosemirror-schema-list@latest/dist/index.cjs]]: v1.5.1
|
||||
* [ext[prosemirror-example-setup|https://cdn.jsdelivr.net/npm/prosemirror-example-setup@latest/dist/index.cjs]]: v1.2.3
|
||||
* [ext[orderedmap|https://cdn.jsdelivr.net/npm/orderedmap@latest/dist/index.cjs]]: v2.1.1
|
||||
* [ext[prosemirror-transform|https://cdn.jsdelivr.net/npm/prosemirror-transform@latest/dist/index.cjs]]: v1.10.3
|
||||
* [ext[prosemirror-keymap|https://cdn.jsdelivr.net/npm/prosemirror-keymap@latest/dist/index.cjs]]: v1.2.2
|
||||
* [ext[prosemirror-history|https://cdn.jsdelivr.net/npm/prosemirror-history@latest/dist/index.cjs]]: v1.4.1
|
||||
* [ext[prosemirror-commands|https://cdn.jsdelivr.net/npm/prosemirror-commands@latest/dist/index.cjs]]: v1.7.0
|
||||
* [ext[prosemirror-dropcursor|https://cdn.jsdelivr.net/npm/prosemirror-dropcursor@latest/dist/index.cjs]]: v1.8.1
|
||||
* [ext[prosemirror-gapcursor|https://cdn.jsdelivr.net/npm/prosemirror-gapcursor@latest/dist/index.cjs]]: v1.3.2
|
||||
* [ext[prosemirror-menu|https://cdn.jsdelivr.net/npm/prosemirror-menu@latest/dist/index.cjs]]: v1.2.4
|
||||
* [ext[prosemirror-inputrules|https://cdn.jsdelivr.net/npm/prosemirror-inputrules@latest/dist/index.cjs]]: v1.5.0
|
||||
* [ext[w3c-keyname|https://cdn.jsdelivr.net/npm/w3c-keyname@latest/dist/index.cjs]]: v2.2.8
|
||||
* [ext[crelt|https://cdn.jsdelivr.net/npm/crelt@latest/dist/index.cjs]]: v1.0.6
|
||||
* [ext[rope-sequence|https://cdn.jsdelivr.net/npm/rope-sequence@latest/dist/index.cjs]]: v1.3.4
|
||||
|
||||
3
plugins/tiddlywiki/prosemirror/tree.tid
Normal file
3
plugins/tiddlywiki/prosemirror/tree.tid
Normal file
@ -0,0 +1,3 @@
|
||||
title: $:/plugins/tiddlywiki/prosemirror/tree
|
||||
|
||||
<<tree prefix:"$:/plugins/tiddlywiki/prosemirror/">>
|
||||
@ -49,7 +49,7 @@ ProsemirrorWidget.prototype.render = function(parent,nextSibling) {
|
||||
var self = this;
|
||||
this.view = new EditorView(container, {
|
||||
state: EditorState.create({
|
||||
doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
|
||||
doc: mySchema.node("doc", null, [mySchema.node("paragraph")]),
|
||||
plugins: exampleSetup({schema: mySchema})
|
||||
}),
|
||||
dispatchTransaction: function(transaction) {
|
||||
@ -64,11 +64,8 @@ ProsemirrorWidget.prototype.render = function(parent,nextSibling) {
|
||||
};
|
||||
|
||||
ProsemirrorWidget.prototype.saveEditorContent = function() {
|
||||
this.editor.save().then((outputData) => {
|
||||
console.log('Article data: ', outputData)
|
||||
}).catch((error) => {
|
||||
console.log('Saving failed: ', error)
|
||||
});
|
||||
const content = this.view.state.doc.toJSON();
|
||||
console.log(JSON.stringify(content));
|
||||
}
|
||||
|
||||
// Debounced save function for performance
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user