mirror of https://github.com/logseq/logseq
[refactor] support React change event for set-edit-content! & fix image style of block conent
parent
66a24e99d3
commit
eb651cfe81
|
@ -1037,8 +1037,8 @@ button.context-menu-option {
|
|||
}
|
||||
|
||||
.content img {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
a.login {
|
||||
|
|
|
@ -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))}]))
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
.blocks-container {
|
||||
}
|
||||
|
||||
.block-content {
|
||||
}
|
||||
|
||||
.block-children {
|
||||
}
|
||||
|
||||
.ls-block {
|
||||
}
|
||||
|
||||
.block-content img {
|
||||
width: 100%;
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue