[refactor] support React change event for set-edit-content! & fix image style of block conent

resources/css/common.css

@@ -1037,8 +1037,8 @@ button.context-menu-option {
 }
 
 .content img {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
 }
 
 a.login {

src/main/frontend/components/block.cljs

@@ -157,10 +157,8 @@
   (let [href (if (util/starts-with? href "http")
                href
                (get-file-absolute-path config href))]
-    [:img.rounded-sm.shadow-xl.mb-2.mt-2
-     {:class "object-contain object-center"
-      :loading "lazy"
-      :style {:max-height "24rem"}
+    [:img.rounded-sm.shadow-xl
+     {:loading "lazy"
       ;; :on-error (fn [])
       :src href
       :title (second (first label))}]))

src/main/frontend/components/block.css

@@ -0,0 +1,15 @@
+.blocks-container {
+}
+
+.block-content {
+}
+
+.block-children {
+}
+
+.ls-block {
+}
+
+.block-content img {
+  width: 100%;
+}

src/main/frontend/components/editor.cljs

@@ -30,7 +30,7 @@
             [frontend.text :as text]
             ["/frontend/utils" :as utils]))
 
-(def *warn-on-infer* false)
+(set! *warn-on-infer* false)
 
 (rum/defc commands < rum/reactive
   [id format]
@@ -355,8 +355,8 @@
         false
         *slash-caret-pos)))])
 
-(def evt-passthrough! #(if (instance? goog.events.Event %) (set! (. % -pt) true)))
-(def evt-passthrough? #(if (instance? goog.events.Event %) (. % -pt)))
+(defonce evt-passthrough! #(if (instance? goog.events.Event %) (set! (. % -pt) true)))
+(defonce evt-passthrough? #(if (instance? goog.events.Event %) (. % -pt)))
 
 (rum/defcs box < rum/reactive
   (mixins/event-mixin
@@ -365,8 +365,6 @@
            input-id id
            input (gdom/getElement input-id)
            repo (:block/repo block)]
-       ;; (.addEventListener input "paste" (fn [event]
-       ;;                                    (editor-handler/append-paste-doc! format event)))
        (mixins/on-key-down
         state
         {;; enter

src/main/frontend/state.cljs

@@ -286,7 +286,7 @@
   [input-id value]
   (when input-id
     (when-let [input (gdom/getElement input-id)]
-      (gobj/set input "value" value))
+      (util/set-change-value input value))
     (update-state! :editor/content (fn [m]
                                      (assoc m input-id value)))
     ;; followers

src/main/frontend/util.cljs

@@ -38,6 +38,11 @@
   [event]
   (gobj/getValueByKeys event "target" "value"))
 
+(defn set-change-value
+  "compatible change event for React"
+  [node value]
+  (utils/triggerInputChange node value))
+
 (defn p-handle
   ([p ok-handler]
    (p-handle p ok-handler (fn [error]

src/main/frontend/utils.js

@@ -1,74 +1,93 @@
 // Copy from https://github.com/primetwig/react-nestable/blob/dacea9dc191399a3520f5dc7623f5edebc83e7b7/dist/utils.js
-export var closest = function closest(target, selector) {
+export var closest = function closest (target, selector) {
   // closest(e.target, '.field')
   while (target) {
-    if (target.matches && target.matches(selector)) return target;
-    target = target.parentNode;
+    if (target.matches && target.matches(selector)) return target
+    target = target.parentNode
   }
-  return null;
-};
+  return null
+}
 
-export var getOffsetRect = function getOffsetRect(elem) {
+export var getOffsetRect = function getOffsetRect (elem) {
   // (1)
-  var box = elem.getBoundingClientRect();
+  var box = elem.getBoundingClientRect()
 
-  var body = document.body;
-  var docElem = document.documentElement;
+  var body = document.body
+  var docElem = document.documentElement
 
   // (2)
-  var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
-  var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+  var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
+  var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
 
   // (3)
-  var clientTop = docElem.clientTop || body.clientTop || 0;
-  var clientLeft = docElem.clientLeft || body.clientLeft || 0;
+  var clientTop = docElem.clientTop || body.clientTop || 0
+  var clientLeft = docElem.clientLeft || body.clientLeft || 0
 
   // (4)
-  var top = box.top + scrollTop - clientTop;
-  var left = box.left + scrollLeft - clientLeft;
+  var top = box.top + scrollTop - clientTop
+  var left = box.left + scrollLeft - clientLeft
 
-  return { top: Math.round(top), left: Math.round(left) };
-};
+  return { top: Math.round(top), left: Math.round(left) }
+}
 
 // jquery focus
-export var focus = function( elem ) {
+export var focus = function (elem) {
   return elem === document.activeElement &&
     document.hasFocus() &&
-    !!( elem.type || elem.href || ~elem.tabIndex );
+    !!(elem.type || elem.href || ~elem.tabIndex)
 }
 
 // copied from https://stackoverflow.com/a/32180863
 export var timeConversion = function (millisec) {
-  var seconds = (millisec / 1000).toFixed(0);
-  var minutes = (millisec / (1000 * 60)).toFixed(0);
-  var hours = (millisec / (1000 * 60 * 60)).toFixed(1);
-  var days = (millisec / (1000 * 60 * 60 * 24)).toFixed(1);
+  var seconds = (millisec / 1000).toFixed(0)
+  var minutes = (millisec / (1000 * 60)).toFixed(0)
+  var hours = (millisec / (1000 * 60 * 60)).toFixed(1)
+  var days = (millisec / (1000 * 60 * 60 * 24)).toFixed(1)
 
   if (seconds < 60) {
-    return seconds + "s";
+    return seconds + 's'
   } else if (minutes < 60) {
-    return minutes + "m";
+    return minutes + 'm'
   } else if (hours < 24) {
-    return hours + "h";
+    return hours + 'h'
   } else {
-    return days + "d"
+    return days + 'd'
   }
 }
 
-export var getSelectionText = function() {
-  const selection = (window.getSelection() || '').toString().trim();
+export var getSelectionText = function () {
+  const selection = (window.getSelection() || '').toString().trim()
   if (selection) {
-    return selection;
+    return selection
   }
 
   // Firefox fix
-  const activeElement = window.document.activeElement;
+  const activeElement = window.document.activeElement
   if (activeElement) {
     if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
-      const el = activeElement;
-      return el.value.slice(el.selectionStart || 0, el.selectionEnd || 0);
+      const el = activeElement
+      return el.value.slice(el.selectionStart || 0, el.selectionEnd || 0)
     }
   }
 
-  return '';
+  return ''
+}
+
+const inputTypes = [
+  window.HTMLInputElement,
+  window.HTMLSelectElement,
+  window.HTMLTextAreaElement,
+]
+
+export const triggerInputChange = (node, value = '', name = 'change') => {
+
+  // only process the change on elements we know have a value setter in their constructor
+  if (inputTypes.indexOf(node.__proto__.constructor) > -1) {
+
+    const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set
+    const event = new Event('change', { bubbles: true })
+
+    setValue.call(node, value)
+    node.dispatchEvent(event)
+  }
 }