From 7c23b96ce5634550341b9554eda9d7c89a79e3c0 Mon Sep 17 00:00:00 2001 From: Sébastien Dailly Date: Mon, 7 Feb 2022 16:03:16 +0100 Subject: Update editor --- editor/editor.css | 19 ++++++++- editor/editor.ml | 48 +++++++++++++++++++++-- editor/link_editor.ml | 2 +- editor/plugins.ml | 2 +- editor/popin.ml | 5 +-- editor/prosemirror/prosemirror.ml | 2 +- editor/prosemirror/prosemirror.mli | 2 +- editor/storage.ml | 80 ++++++++++++++++++++++++++++---------- editor/storage.mli | 25 ++++++++++++ editor/tooltip.ml | 3 +- editor/ui.ml | 8 ++++ 11 files changed, 163 insertions(+), 33 deletions(-) create mode 100755 editor/storage.mli create mode 100755 editor/ui.ml (limited to 'editor') diff --git a/editor/editor.css b/editor/editor.css index 43c9acf..09fc472 100644 --- a/editor/editor.css +++ b/editor/editor.css @@ -368,7 +368,9 @@ li.ProseMirror-selectednode:after { font-weight:300; line-height:1.1; font-family:Source Sans Pro,Roboto,Open Sans,Liberation Sans,DejaVu Sans,Verdana,Helvetica,Arial,sans-serif; - width:100%; + width: 100%; + box-sizing: border-box; + border: 0px; } @@ -438,3 +440,18 @@ footnote::after { height: 0; width: 0; } + +.action-button { + background-color: unset; + color: unset; + border: 0px +} + +.action-button:active { + transform: translateY(1px); +} + +aside ul { + text-align: left; + +} diff --git a/editor/editor.ml b/editor/editor.ml index 1c2b8a5..c3cad1e 100755 --- a/editor/editor.ml +++ b/editor/editor.ml @@ -1,6 +1,46 @@ -open Js_of_ocaml +open StdLabels open Brr module PM = Prosemirror +module Js = Js_of_ocaml.Js + +let populate_menu () = + match Blog.Sidebar.get () with + | None -> () + | Some element -> + let () = Blog.Sidebar.clean element in + let uri = Brr.Window.location Brr.G.window in + + let pages = + + List.map (Storage.get_ids ()) + ~f:(fun name -> + let target = + Jstr.( (Brr.Uri.path uri) + + (Jstr.v "?page=") + + name) in + El.li + [ El.a + ~at:[At.href target] + [ El.txt name ] ] + ) in + + let childs = + [ El.button + ~at:At.[class' (Jstr.v "action-button")] + [ El.i + [] + ~at:At.[ class' (Jstr.v "fa") + ; class' (Jstr.v "fa-2x") + ; class' (Jstr.v "fa-times-circle") + ] + ] + ; El.hr () + ; El.ul + pages + ] in + + El.append_children element childs + let prosemirror id content = begin match (Jv.is_none id), (Jv.is_none content) with @@ -22,8 +62,10 @@ let prosemirror id content = None in let mySchema = PM.Model.schema pm specs in + populate_menu (); + (* Create the initial state *) - let state = Storage.load pm mySchema content in + let state = Storage.load pm mySchema (Jv.Id.of_jv content) Storage.page_id in let props = PM.View.direct_editor_props () in props##.state := state; @@ -47,7 +89,7 @@ let prosemirror id content = (* Attach an event on focus out *) let _ = Brr_note.Evr.on_el (Ev.focusout) - (fun _ -> Storage.save view) + (fun _ -> Storage.save view Storage.page_id) (Jv.Id.of_jv id) in () diff --git a/editor/link_editor.ml b/editor/link_editor.ml index cd7f477..9bfdfd4 100755 --- a/editor/link_editor.ml +++ b/editor/link_editor.ml @@ -1,6 +1,6 @@ -open Js_of_ocaml open Brr +module Js = Js_of_ocaml.Js module PM = Prosemirror let link_edit diff --git a/editor/plugins.ml b/editor/plugins.ml index 68f9c31..91dedeb 100755 --- a/editor/plugins.ml +++ b/editor/plugins.ml @@ -1,4 +1,4 @@ -open Js_of_ocaml +module Js = Js_of_ocaml.Js module PM = Prosemirror (** Commands *) diff --git a/editor/popin.ml b/editor/popin.ml index cd5154d..63dcad1 100755 --- a/editor/popin.ml +++ b/editor/popin.ml @@ -1,5 +1,5 @@ -open Js_of_ocaml open Brr +module Js = Js_of_ocaml.Js module PM = Prosemirror type binded_field = @@ -44,10 +44,9 @@ let build_field = fun field f -> let button_content = - [ El.i + [ El.i [] ~at:At.[ class' (Jstr.v "fas") ; class' (Jstr.v "fa-pen") ] - [] ] in let button = El.button diff --git a/editor/prosemirror/prosemirror.ml b/editor/prosemirror/prosemirror.ml index 2a9b92c..48dbfd0 100755 --- a/editor/prosemirror/prosemirror.ml +++ b/editor/prosemirror/prosemirror.ml @@ -1,5 +1,5 @@ -open Js_of_ocaml open Brr +module Js = Js_of_ocaml.Js type t = Jv.t diff --git a/editor/prosemirror/prosemirror.mli b/editor/prosemirror/prosemirror.mli index 9260af6..506ab89 100755 --- a/editor/prosemirror/prosemirror.mli +++ b/editor/prosemirror/prosemirror.mli @@ -1,5 +1,5 @@ -open Js_of_ocaml open Brr +module Js = Js_of_ocaml.Js type t diff --git a/editor/storage.ml b/editor/storage.ml index 2dc768a..0d74a05 100755 --- a/editor/storage.ml +++ b/editor/storage.ml @@ -1,6 +1,7 @@ -open Js_of_ocaml open Brr module PM = Prosemirror +module Js = Js_of_ocaml.Js + let storage_key = (Jstr.v "editor") let storage = Brr_io.Storage.local G.window @@ -11,7 +12,7 @@ let create_new_state pm mySchema content = let doc = PM.Model.( DOMParser.parse (DOMParser.from_schema pm mySchema) - (Jv.Id.of_jv content)) in + content) in let props = PM.State.creation_prop () in props##.doc := Js.some doc; @@ -30,10 +31,11 @@ let page_id let params = Brr.Uri.Params.of_jstr query in Brr.Uri.Params.find (Jstr.v "page") params -(** Read the state from the local storage, or load the content from the given - element *) +(** [load' pm schema content key] will load the content stored in the local + storage for the [key]. +*) let load' - : PM.t -> PM.Model.schema Js.t -> Jv.t -> Jstr.t -> PM.State.editor_state Js.t + : PM.t -> PM.Model.schema Js.t -> El.t -> Jstr.t -> PM.State.editor_state Js.t = fun pm schema content key -> let opt_data = Brr_io.Storage.get_item storage key in @@ -49,18 +51,6 @@ let load' obj##.schema := Js.some schema; PM.State.fromJSON pm obj json -let load - : PM.t -> PM.Model.schema Js.t -> Jv.t -> PM.State.editor_state Js.t - = fun pm schema content -> - match page_id () with - | None -> load' pm schema content storage_key - | Some value -> - let key = Jstr.concat - ~sep:(Jstr.v "_") - [storage_key ; value] in - load' pm schema content key - - (** Save the view *) let save' : PM.View.editor_view Js.t -> Jstr.t -> unit @@ -74,13 +64,63 @@ let save' |> Console.log_if_error ~use:() +(** [load pm schema content f] will try load the content stored in the local + storage. The right key is given by the result of the function [f] +*) +let load + : PM.t -> PM.Model.schema Js.t -> El.t -> (unit -> Jstr.t option) -> PM.State.editor_state Js.t + = fun pm schema content f -> + match f () with + | None -> load' pm schema content storage_key + | Some value -> + let key = Jstr.concat + ~sep:(Jstr.v "_") + [storage_key ; value] in + load' pm schema content key + let save - : PM.View.editor_view Js.t -> unit - = fun view -> - match page_id () with + : PM.View.editor_view Js.t -> (unit -> Jstr.t option) -> unit + = fun view f -> + match f () with | None -> save' view storage_key | Some value -> let key = Jstr.concat ~sep:(Jstr.v "_") [storage_key ; value] in save' view key + +let delete + : (unit -> Jstr.t option) -> unit + = fun f -> + match f () with + | None -> () + | Some key -> + let storage = Brr_io.Storage.local G.window in + let () = Brr_io.Storage.remove_item storage key in + (* Reload the page *) + Brr.Window.reload G.window + +let get_ids + : unit -> Jstr.t list + = fun () -> + let open Brr_io in + let storage = Storage.local G.window in + let items = Storage.length storage in + + let sub = Jstr.( storage_key + (v "_") ) in + let start = Jstr.length sub in + + let rec add_element acc = function + | 0 -> acc + | nb -> + begin match Storage.key storage nb with + | Some key when (Jstr.starts_with ~sub key) -> + + let key_name = Jstr.sub key + ~start in + add_element (key_name::acc) (nb -1) + | _ -> add_element acc (nb -1) + end + + in + add_element [] items diff --git a/editor/storage.mli b/editor/storage.mli new file mode 100755 index 0000000..5424119 --- /dev/null +++ b/editor/storage.mli @@ -0,0 +1,25 @@ +module PM = Prosemirror +module Js = Js_of_ocaml.Js + +(** Provide a function for extracting the page id from the URL *) +val page_id + : unit -> Jstr.t option + +(** load pm schema content f] will load the content and store it into the + element [content]. + + The function [f] is called to identified which is the appropriate page id. +*) +val load + : PM.t -> PM.Model.schema Js.t -> Brr.El.t -> (unit -> Jstr.t option) -> PM.State.editor_state Js.t + +val save + : PM.View.editor_view Js.t -> (unit -> Jstr.t option) -> unit + +(** Remove the page from the storage and reload the page *) +val delete + : (unit -> Jstr.t option) -> unit + +(** Collect all the keys to the existing pages *) +val get_ids + : unit -> Jstr.t list diff --git a/editor/tooltip.ml b/editor/tooltip.ml index e172cbf..05d56d4 100755 --- a/editor/tooltip.ml +++ b/editor/tooltip.ml @@ -1,8 +1,7 @@ open StdLabels -open Js_of_ocaml open Brr - +module Js = Js_of_ocaml.Js module PM = Prosemirror (** https://prosemirror.net/examples/tooltip/ *) diff --git a/editor/ui.ml b/editor/ui.ml new file mode 100755 index 0000000..001ae98 --- /dev/null +++ b/editor/ui.ml @@ -0,0 +1,8 @@ +open Brr +module Js = Js_of_ocaml.Js + +let popup + : unit -> El.t + = fun () -> + El.div + [] -- cgit v1.2.3