@ -9,89 +9,101 @@
// destroy() { this.textarea.remove() }
// destroy() { this.textarea.remove() }
// }
// }
import { EditorView } from "prosemirror-view" import { EditorView } from "prosemirror-view" ;
import { EditorState } from "prosemirror-state" import { EditorState , TextSelection } from "prosemirror-state" ;
import { exampleSetup } from "prosemirror-example-setup" import { exampleSetup } from "prosemirror-example-setup" ;
import { keymap } from "prosemirror-keymap" ; import { keymap } from "prosemirror-keymap" ;
import { writeAsMarkdownParser } from "./markdownParser" import { writeAsMarkdownParser } from "./markdownParser" ;
import { writeAsMarkdownSerializer } from "./markdownSerializer" import { writeAsMarkdownSerializer } from "./markdownSerializer" ;
import { writeFreelySchema } from "./schema" import { writeFreelySchema } from "./schema" ;
import { getMenu } from "./menu" import { getMenu } from "./menu" ;
let $title = document . querySelector ( '#title' ) let $title = document . querySelector ( "#title" ) ;
let $content = document . querySelector ( '#content' ) let $content = document . querySelector ( "#content" ) ;
class ProseMirrorView { // Bugs:
constructor ( target , content ) { // 1. When there's just an empty line and a hard break is inserted with shift-enter then two enters are inserted
this . view = new EditorView ( target , { // which do not show up in the markdown ( maybe bc. they are training enters )
state : EditorState . create ( {
doc : function ( content ) {
// console.log('loading '+window.draftKey)
let localDraft = localStorage . getItem ( window . draftKey ) ;
if ( localDraft != null ) {
content = localDraft
}
if ( content . indexOf ( "# " ) === 0 ) {
let eol = content . indexOf ( "\n" ) ;
let title = content . substring ( "# " . length , eol ) ;
content = content . substring ( eol + "\n\n" . length ) ;
$title . value = title ;
}
return writeAsMarkdownParser . parse ( content )
} ( content ) ,
plugins : [
keymap ( {
"Mod-Enter" : ( ) => {
document . getElementById ( "publish" ) . click ( ) ;
return true ;
} ,
"Mod-k" : ( ) => {
console . log ( "TODO-link" ) ;
return true ;
}
} ) ,
... exampleSetup ( { schema : writeFreelySchema , menuContent : getMenu ( ) } ) ,
] class ProseMirrorView {
} ) , constructor ( target , content ) {
dispatchTransaction ( transaction ) { let localDraft = localStorage . getItem ( window . draftKey ) ;
// console.log('saving to '+window.draftKey)
if ( localDraft != null ) {
const newContent = writeAsMarkdownSerializer . serialize ( transaction . doc ) content = localDraft ;
console . log ( { newContent } )
$content . value = newContent
localStorage . setItem ( window . draftKey , function ( ) {
let draft = "" ;
if ( $title . value != null && $title . value !== "" ) {
draft = "# " + $title . value + "\n\n"
}
draft += $content . value
return draft
} ( ) ) ;
let newState = this . state . apply ( transaction )
this . updateState ( newState )
}
} )
} }
if ( content . indexOf ( "# " ) === 0 ) {
get content ( ) { let eol = content . indexOf ( "\n" ) ;
return defaultMarkdownSerializer . serialize ( this . view . state . doc ) let title = content . substring ( "# " . length , eol ) ;
content = content . substring ( eol + "\n\n" . length ) ;
$title . value = title ;
} }
focus ( ) { this . view . focus ( ) }
destroy ( ) { this . view . destroy ( ) }
}
let place = document . querySelector ( "#editor" ) const doc = writeAsMarkdownParser . parse (
let view = new ProseMirrorView ( place , $content . value ) // Replace all "solo" \n's with \\\n for correct markdown parsing
content . replaceAll ( /(?<!\n)\n(?!\n)/g , "\\\n" )
) ;
this . view = new EditorView ( target , {
state : EditorState . create ( {
doc ,
plugins : [
keymap ( {
"Mod-Enter" : ( ) => {
document . getElementById ( "publish" ) . click ( ) ;
return true ;
} ,
"Mod-k" : ( ) => {
const linkButton = document . querySelector ( ".ProseMirror-icon[title='Add or remove link']" )
linkButton . dispatchEvent ( new Event ( 'mousedown' ) ) ;
return true ;
} ,
} ) ,
... exampleSetup ( {
schema : writeFreelySchema ,
menuContent : getMenu ( ) ,
} ) ,
] ,
} ) ,
dispatchTransaction ( transaction ) {
const newContent = writeAsMarkdownSerializer
. serialize ( transaction . doc )
// Replace all \\\ns ( not followed by a \n ) with \n
. replaceAll ( /\\\n(?!\n)/g , "\n" ) ;
$content . value = newContent ;
let draft = "" ;
if ( $title . value != null && $title . value !== "" ) {
draft = "# " + $title . value + "\n\n" ;
}
draft += newContent ;
localStorage . setItem ( window . draftKey , draft ) ;
let newState = this . state . apply ( transaction ) ;
this . updateState ( newState ) ;
} ,
} ) ;
// Editor is focused to the last position. This is a workaround for a bug:
// 1. 1 type something in an existing entry
// 2. reload - works fine, the draft is reloaded
// 3. reload again - the draft is somehow removed from localStorage and the original content is loaded
// When the editor is focused the content is re-saved to localStorage
// This is also useful for editing, so it's not a bad thing even
const lastPosition = this . view . state . doc . content . size ;
const selection = TextSelection . create ( this . view . state . doc , lastPosition ) ;
this . view . dispatch ( this . view . state . tr . setSelection ( selection ) ) ;
this . view . focus ( ) ;
}
get content ( ) {
return defaultMarkdownSerializer . serialize ( this . view . state . doc ) ;
}
focus ( ) {
this . view . focus ( ) ;
}
destroy ( ) {
this . view . destroy ( ) ;
}
}
// document.querySelectorAll("input[type=radio]").forEach(button => {
let place = document . querySelector ( "#editor" ) ;
// button.addEventListener("change", () => {
let view = new ProseMirrorView ( place , $content . value ) ;
// if (!button.checked) return
// let View = button.value == "markdown" ? MarkdownView : ProseMirrorView
// if (view instanceof View) return
// let content = view.content
// view.destroy()
// view = new View(place, content)
// view.focus()
// })
// })
Viktor Vaczi
4 years ago