card-mod-prosemirror_editor 0.1

data/lib/javascript/script_prosemirror_config.js.coffee

@@ -0,0 +1,31 @@
+decko.addEditor(
+  '.prosemirror-editor',
+  ->
+    decko.initProseMirror @[0].id,
+  ->
+    prosemirrorContent @[0].id
+)
+
+$.extend decko,
+  setProseMirrorConfig: (string) ->
+    setter = ->
+      try
+        $.parseJSON string
+      catch
+        {}
+    decko.proseMirrorConfig = setter()
+
+  initProseMirror: (el_id) ->
+    conf = {
+      menuBar: true,
+      tooltipMenu: false
+    }
+    hard_conf = { docFormat: "html" }
+    user_conf = if decko.proseMirrorConfig? then decko.proseMirrorConfig else {}
+    $.extend conf, user_conf, hard_conf
+    createProseMirror(el_id, conf)
+
+prosemirrorContent = (id) ->
+  content = getProseMirrorContent(id)
+  return '' if content == '<p></p>'
+  content

data/lib/stylesheets/style_prosemirror.scss

@@ -0,0 +1,298 @@
+/*-- ProseMirror color variables */
+
+$pm-yellow-1: #cc7;
+$pm-yellow-2: #ffc;
+$pm-grey-1: $gray-200;
+$pm-grey-2: $gray-300;
+$pm-grey-3: $gray-400;
+$pm-grey-5: $gray-600;
+$pm-cyan: $cyan;
+
+.ProseMirror {
+  position: relative;
+}
+
+.ProseMirror {
+  white-space: pre-wrap;
+}
+
+.ProseMirror ul, .ProseMirror ol {
+  padding-left: 30px;
+  cursor: default;
+}
+
+.ProseMirror blockquote {
+  padding-left: 1em;
+  border-left: 3px solid $gray-300;
+  margin-left: 0; margin-right: 0;
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.ProseMirror li {
+  position: relative;
+  pointer-events: none; /* Don't do weird stuff with marker clicks */
+}
+.ProseMirror li > * {
+  pointer-events: auto;
+}
+
+.ProseMirror-nodeselection *::selection, .ProseMirror-widget *::selection { background: transparent; }
+.ProseMirror-nodeselection *::-moz-selection, .ProseMirror-widget *::-moz-selection { background: transparent; }
+
+.ProseMirror-selectednode {
+  outline: 2px solid $pm-cyan;
+}
+
+/* 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 $pm-cyan;
+  pointer-events: none;
+}
+
+
+.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 $pm-grey-3;
+  margin-right: 3px;
+}
+
+.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {
+  font-size: 90%;
+  white-space: nowrap;
+}
+
+.ProseMirror-menu-dropdown {
+  vertical-align: 1px;
+  cursor: pointer;
+}
+
+.ProseMirror-menu-dropdown-wrap {
+  padding: 1px 14px 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: 2px;
+  top: calc(50% - 2px);
+}
+
+.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {
+  position: absolute;
+  background: white;
+  color: $pm-grey-5;
+  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: $pm-grey-1;
+}
+
+.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: $pm-grey-2;
+  border-radius: 4px;
+}
+
+.ProseMirror-menu-active {
+  background: $pm-grey-2;
+  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: $pm-grey-5;
+  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-icon svg {
+  fill: currentColor;
+  height: 1em;
+}
+
+.ProseMirror-icon span {
+  vertical-align: text-top;
+}
+
+
+
+/* Add space around the hr to make clicking it easier */
+
+.ProseMirror-example-setup-style hr {
+  position: relative;
+  height: 6px;
+  border: none;
+}
+
+.ProseMirror-example-setup-style hr:after {
+  content: "";
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  top: 2px;
+  border-top: 2px solid silver;
+}
+
+.ProseMirror-example-setup-style img {
+  cursor: default;
+}
+
+.ProseMirror-example-setup-style table {
+  border-collapse: collapse;
+}
+
+.ProseMirror-example-setup-style td {
+  vertical-align: top;
+  border: 1px solid $pm-grey-3;
+  padding: 3px 5px;
+}
+
+.ProseMirror-prompt {
+  background: white;
+  padding: 5px 10px 5px 15px;
+  border: 1px solid silver;
+  position: fixed;
+  border-radius: 3px;
+  z-index: 11;
+  box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
+}
+
+.ProseMirror-prompt h5 {
+  margin: 0;
+  font-weight: normal;
+  font-size: 100%;
+  color: #444;
+}
+
+.ProseMirror-prompt input[type="text"],
+.ProseMirror-prompt textarea {
+  background: $pm-grey-2;
+  border: none;
+  outline: none;
+}
+
+.ProseMirror-prompt input[type="text"] {
+  padding: 0 4px;
+}
+
+.ProseMirror-prompt-close {
+  position: absolute;
+  left: 2px; top: 1px;
+  color: $pm-grey-5;
+  border: none; background: transparent; padding: 0;
+}
+
+.ProseMirror-prompt-close:after {
+  content: "✕";
+  font-size: 12px;
+}
+
+.ProseMirror-invalid {
+  background: $pm-yellow-2;
+  border: 1px solid $pm-yellow-1;
+  border-radius: 4px;
+  padding: 5px 10px;
+  position: absolute;
+  min-width: 10em;
+}
+
+.ProseMirror-prompt-buttons {
+  margin-top: 5px;
+  display: none;
+}

data/set/all/prosemirror_editor.rb

@@ -0,0 +1,8 @@
+
+format :html do
+  def prosemirror_editor_input
+    wrap_with :div, id: unique_id, class: "prosemirror-editor" do
+      hidden_field :content, class: "d0-card-content", value: card.content
+    end
+  end
+end

data/set/self/script_prosemirror.rb

@@ -0,0 +1,4 @@
+include_set Abstract::CodeFile
+
+Self::ScriptMods.add_item :script_prosemirror
+Self::InputOptions.add_to_basket :options, "prosemirror editor"

data/set/self/script_prosemirror_config.rb

@@ -0,0 +1,5 @@
+include_set Abstract::CodeFile
+
+Self::ScriptEditors.add_item :script_prosemirror_config
+All::Head::HtmlFormat.add_to_basket :mod_js_config,
+                                    [:prose_mirror, "setProseMirrorConfig"]

data/set/self/style_prosemirror.rb

@@ -0,0 +1,3 @@
+include_set Abstract::CodeFile
+
+Self::StyleMods.add_item :style_prosemirror

metadata

@@ -0,0 +1,69 @@
+--- !ruby/object:Gem::Specification
+name: card-mod-prosemirror_editor
+version: !ruby/object:Gem::Version
+  version: '0.1'
+platform: ruby
+authors:
+- Ethan McCutchen
+- Philipp Kühl
+- Gerry Gleason
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2020-09-19 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: card-mod-edit
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: '0.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: '0.1'
+description: ''
+email:
+- info@decko.org
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- db/migrate_core_cards/20160804112548_add_prosemirror_cards.rb
+- lib/javascript/script_prosemirror.js
+- lib/javascript/script_prosemirror_config.js.coffee
+- lib/stylesheets/style_prosemirror.scss
+- set/all/prosemirror_editor.rb
+- set/self/script_prosemirror.rb
+- set/self/script_prosemirror_config.rb
+- set/self/style_prosemirror.rb
+homepage: http://decko.org
+licenses:
+- GPL-2.0
+- GPL-3.0
+metadata:
+  card-mod: prosemirror_editor
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.3.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3
+signing_key:
+specification_version: 4
+summary: Calendar editor
+test_files: []