diff --git a/dist/embed/iframe.html b/dist/embed/iframe.html index 55ee4b7c9b..6b39ba5cd1 100644 --- a/dist/embed/iframe.html +++ b/dist/embed/iframe.html @@ -21,6 +21,7 @@ .twitter-tweet, .instagram-media { margin: 0px !important; display: inline-flex !important; } .gist-file { margin: 0px !important; } + .cp_embed_iframe { border: 0px !important; } html.align1 .twitter-tweet, body.align1 .instagram-media { justify-content: center; } html.align2 .twitter-tweet, body.align2 .instagram-media { justify-content: flex-end; } diff --git a/electron.js b/electron.js index 1ef0865170..943078ea56 100644 --- a/electron.js +++ b/electron.js @@ -144,8 +144,6 @@ function createWindow () { console.error('[Api] method not defined:', cmd); }; }); - - }; app.on('ready', () => { diff --git a/electron/js/window.js b/electron/js/window.js index 1716c748a3..cb28310aa6 100644 --- a/electron/js/window.js +++ b/electron/js/window.js @@ -62,10 +62,9 @@ class WindowManager { win.on('enter-full-screen', () => Util.send(win, 'enter-full-screen')); win.on('leave-full-screen', () => Util.send(win, 'leave-full-screen')); - win.webContents.on('context-menu', (e, param) => Util.send(win, 'spellcheck', param)); - - Api.setSpellingLang(win, languages); - Api.setZoom(win, zoom); + win.webContents.on('context-menu', (e, param) => { + Util.send(win, 'spellcheck', param.misspelledWord, param.dictionarySuggestions, param.x, param.y, param.selectionRect); + }); if (hideMenuBar) { win.setMenuBarVisibility(false); diff --git a/electron/json/cors.json b/electron/json/cors.json index 5f52ae2f3e..e194015389 100644 --- a/electron/json/cors.json +++ b/electron/json/cors.json @@ -46,7 +46,11 @@ "https://*.fbcdn.net", "https://static.cdninstagram.com", "https://telegram.org", - "https://github.githubassets.com" + "https://github.githubassets.com", + "https://cpwebassets.codepen.io", + "https://cdnjs.cloudflare.com", + "https://*.bilibili.com", + "https://s1.hdslb.com" ], "font-src": [ @@ -99,7 +103,16 @@ "https://*.reddit.com", "https://www.instagram.com", "https://t.me", - "https://gist.github.com" + "https://gist.github.com", + "https://codepen.io", + "https://www.facebook.com", + "https://*.bilibili.com", + "https://*.bilibili.tv", + "https://*.bilivideo.cn:*", + "https://*.bilivideo.com", + "https://*.hdslb.com", + "wss://*.bilibili.com:*", + "wss://*.biliapi.net" ], "script-src-elem": [ @@ -128,7 +141,11 @@ "https://static.cdninstagram.com", "https://telegram.org", "https://oauth.tg.dev", - "https://gist.github.com" + "https://gist.github.com", + "https://cpwebassets.codepen.io", + "https://codepen.io", + "https://cdnjs.cloudflare.com", + "https://*.hdslb.com" ], "frame-src": [ @@ -147,7 +164,10 @@ "https://embed.reddit.com", "https://www.facebook.com", "https://www.instagram.com", - "https://t.me" + "https://t.me", + "https://codepen.io", + "https://cdpn.io", + "https://*.bilibili.com" ], "worker-src": [ diff --git a/src/json/text.json b/src/json/text.json index cac10af606..1e02e48056 100644 --- a/src/json/text.json +++ b/src/json/text.json @@ -459,6 +459,8 @@ "blockDataviewCreateNew": "Create new Object", "blockDataviewCreateNewCollection": "Create new Collection", "blockDataviewCreateNewSet": "Create new Set", + "blockDataviewCreateNewTooltipCollection": "Create new Object in this Collection", + "blockDataviewCreateNewTooltipType": "Create new %s object", "blockDataviewShowTemplates": "Show Templates", "blockDataviewSearch": "Search", diff --git a/src/scss/block/bookmark.scss b/src/scss/block/bookmark.scss index a832d777dd..4de3c766e8 100644 --- a/src/scss/block/bookmark.scss +++ b/src/scss/block/bookmark.scss @@ -28,8 +28,8 @@ .archive { position: absolute; right: 10px; top: 10px; z-index: 1; } } - .inner.vertical { display: flex; flex-direction: column-reverse; } - .inner.vertical { + .inner.isVertical { display: flex; flex-direction: column-reverse; } + .inner.isVertical { .side.left { width: 100%; border-radius: 0px; } .side.right { aspect-ratio: 7/3; width: 100%; border-radius: 0px; border-bottom: 0.05em solid $colorShapeSecondary; } } @@ -40,7 +40,7 @@ .side.right { width: 28%; min-height: 90px; display: block; position: relative; overflow: hidden; } } - .inner.withImage.vertical { + .inner.withImage.isVertical { .side.left { width: 100%; } .side.right { width: 100%; } } diff --git a/src/scss/block/dataview.scss b/src/scss/block/dataview.scss index 7977a64328..1989a9c15f 100644 --- a/src/scss/block/dataview.scss +++ b/src/scss/block/dataview.scss @@ -92,7 +92,7 @@ > .sides { gap: 0px 16px; display: flex; flex-direction: row; align-items: center; justify-content: stretch; width: 100%; } > .sides { > .side { padding: 15px 0px; white-space: nowrap; line-height: 28px; display: flex; flex-direction: row; align-items: center; } - > .side.left { flex-grow: 1; padding-left: 14px; } + > .side.left { flex-grow: 1; padding-left: 14px; max-width: 100%; } > .side.right { flex-shrink: 0; gap: 0px 4px; justify-content: flex-end; } > .side.right { .filter { color: $colorTextPrimary; padding: 0px; } @@ -253,11 +253,6 @@ .icon.plus:hover { background-color: transparent; } } .dataviewControls::after { display: none !important; } - .dataviewControls.active { - > .sides { - > .side.right { opacity: 1; } - } - } .dataviewSelection { .side.left { @include text-paragraph; } @@ -268,6 +263,12 @@ } } + .block.blockDataview.isInline.isVertical { + .dataviewControls { + > .sides { flex-direction: column; align-items: flex-start; justify-content: flex-start; } + } + } + .block.blockDataview.showMenu { .dataviewHead { .icon.source { opacity: 1; } diff --git a/src/scss/block/dataview/view/graph.scss b/src/scss/block/dataview/view/graph.scss index 2d521a8e57..9b01a195d9 100644 --- a/src/scss/block/dataview/view/graph.scss +++ b/src/scss/block/dataview/view/graph.scss @@ -11,4 +11,8 @@ canvas.move { cursor: move; } } } + + .block.blockDataview.isInline { + .viewContent.viewGraph { height: 500px; } + } } \ No newline at end of file diff --git a/src/scss/block/featured.scss b/src/scss/block/featured.scss index 30e68e73cb..3a084f2723 100644 --- a/src/scss/block/featured.scss +++ b/src/scss/block/featured.scss @@ -44,7 +44,10 @@ } .cellContent.c-select { - .over { display: inline-flex; gap: 6px; align-items: center; } + .over { display: inline; } + .tagItem { margin: 0px 6px 0px 0px; vertical-align: middle; } + .tagItem:last-child { margin-right: 0px; } + .tagItem.isStatus { line-height: 16px; } .more { margin: 0px; vertical-align: middle; } } diff --git a/src/scss/block/link.scss b/src/scss/block/link.scss index 58df971dea..26bfd06fd6 100644 --- a/src/scss/block/link.scss +++ b/src/scss/block/link.scss @@ -69,7 +69,7 @@ .iconObject { position: absolute; left: 16px; top: 15px; background-color: $colorShapeTertiary; border-radius: 10px; } } - .linkCard.c48.withIcon.withCover.vertical { + .linkCard.c48.withIcon.withCover.isVertical { .sides { min-height: 62px; } .side.left { padding: 24px 16px 16px 16px; z-index: 10; } .iconObject { top: -32px; transform: none; } @@ -81,18 +81,18 @@ .side.right { width: 28%; display: block; border: 1px solid $colorShapeSecondary; border-left: 0px; } } - .linkCard.vertical { display: block; } - .linkCard.vertical { + .linkCard.isVertical { display: block; } + .linkCard.isVertical { .sides { flex-direction: column-reverse; } .side.left { width: 100%; border-right-width: 1px; } .side.right { aspect-ratio: 7/3; width: 100%; border-radius: 12px 12px 0px 0px !important; border: 1px solid $colorShapeSecondary; border-bottom: 0px; } } - .linkCard.withCover.vertical { + .linkCard.withCover.isVertical { .side.left { border-radius: 0px 0px 12px 12px !important; } } - .linkCard.withCover.vertical.text { padding-top: 0px; } + .linkCard.withCover.isVertical.text { padding-top: 0px; } } .block.blockLink.text { diff --git a/src/scss/block/text.scss b/src/scss/block/text.scss index f75ef85beb..12aa687fb7 100644 --- a/src/scss/block/text.scss +++ b/src/scss/block/text.scss @@ -12,47 +12,47 @@ smile * { display: inline; vertical-align: middle; } smile .loaderWrapper { display: inline-block; } - markupCode { + markupcode { display: inline; font-family: 'Plex'; border-radius: 4px; background: $colorShapeSecondary; padding: 2px 4px; } - markupEmoji { display: inline; user-select: all; } - markupEmoji * { user-select: all; } - markupEmoji { + markupemoji { display: inline; user-select: all; } + markupemoji * { user-select: all; } + markupemoji { smile img { vertical-align: top; } } - markupLink { position: relative; } - markupLink, markupObject { color: inherit; text-decoration: none; border-bottom: 0.075em solid; transition: border-color $transitionCommon; cursor: default; } - markupLink.disabled, markupObject.disabled { border-width: 0px; } + markuplink { position: relative; } + markuplink, markupobject { color: inherit; text-decoration: none; border-bottom: 0.075em solid; transition: border-color $transitionCommon; cursor: default; } + markuplink.disabled, markupobject.disabled { border-width: 0px; } - markupMention { display: inline; user-select: all !important; position: relative; cursor: default; } - markupMention * { user-select: text !important; } - markupMention { + markupmention { display: inline; user-select: all !important; position: relative; cursor: default; } + markupmention * { user-select: text !important; } + markupmention { smile { display: none; position: relative; z-index: 1; } .space { width: 6px; height: 20px; margin-top: -4px; vertical-align: middle; display: none; } name { display: inline; white-space: normal; position: relative; border-bottom: 0.075em solid; border-color: inherit; } } - markupMention.disabled { + markupmention.disabled { name { border-width: 0px; } } - markupMention.withImage { + markupmention.withImage { smile { display: inline; } .space { display: inline; } } - markupMention.withImage.c24 name markupBgcolor:first-child { margin-left: -22px; padding-left: 22px; } - markupMention.withImage.c26 name markupBgcolor:first-child { margin-left: -22px; padding-left: 22px; } - markupMention.withImage.c28 name markupBgcolor:first-child { margin-left: -27px; padding-left: 27px; } - markupMention.withImage.c32 name markupBgcolor:first-child { margin-left: -34px; padding-left: 34px; } - markupMention:hover { + markupmention.withImage.c24 name markupBgcolor:first-child { margin-left: -22px; padding-left: 22px; } + markupmention.withImage.c26 name markupBgcolor:first-child { margin-left: -22px; padding-left: 22px; } + markupmention.withImage.c28 name markupBgcolor:first-child { margin-left: -27px; padding-left: 27px; } + markupmention.withImage.c32 name markupBgcolor:first-child { margin-left: -34px; padding-left: 34px; } + markupmention:hover { name::before { border-color: $colorTextPrimary; } } - markupBold { font-weight: 600; } - markupItalic { font-style: italic; } - markupStrike { text-decoration: line-through; } - markupUnderline { border-bottom: 0.05em solid; } + markupbold { font-weight: 600; } + markupitalic { font-style: italic; } + markupstrike { text-decoration: line-through; } + markupunderline { border-bottom: 0.05em solid; } .markers { display: flex; padding: 1px 0px; } .markers { diff --git a/src/scss/menu/block/common.scss b/src/scss/menu/block/common.scss index afe8268731..2fe13d2703 100644 --- a/src/scss/menu/block/common.scss +++ b/src/scss/menu/block/common.scss @@ -24,43 +24,27 @@ .content { padding: 0px; } .wrap { height: 100%; } .items { height: 100%; } - .item.empty { padding: 14px; } .sectionName { padding: 0px 14px 4px 14px; } .sectionName::before { content: ""; display: block; width: 100%; height: 1px; margin: 8px 0px 11px 0px; background: $colorShapeSecondary; } .sectionName.first { padding-top: 4px; } .sectionName.first::before { display: none; } - .item { padding: 4px 16px; } - .item.add { padding: 6px 16px; } - .item.sides { display: flex; padding: 6px 16px; } - .info { width: 154px; @include text-overflow-nw; line-height: 20px; border-radius: 4px; transition: background $transitionCommon; flex-shrink: 0; margin-right: 6px; } - .cell { width: calc(100% - 160px); white-space: nowrap; } - .cell.c-select { - .tagItem { margin-bottom: 0px; vertical-align: middle; } - } + .item { padding: 4px 16px; } + .item.add { padding: 6px 16px; } + .item.sides { display: flex; padding: 6px 16px; } + .item.empty { padding: 16px; } .item { .icon.plus { margin-right: 4px; background-image: url('~img/icon/plus/menu0.svg'); } } - .item * { } .item::before { transition: none; } - .cellContent { overflow: hidden; height: 20px; line-height: 20px; } - .cellContent { - .empty { display: block; } - } - - .cellContent.c-longText { - .name { -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; } - } - } - .menu.menuBlockAdd { .item.isBig { .iconObject { background-color: $colorShapeTertiary; } } @@ -105,7 +89,19 @@ .icon.collection { background-image: url('~img/icon/menu/action/block/collection1.svg'); } } - .icon.arrow { width: 20px !important; height: 20px !important; background-color: unset !important; left: auto !important; top: 50% !important; } + .cell { width: calc(100% - 160px); white-space: nowrap; } + .cell.c-select { + .tagItem { margin-bottom: 0px; vertical-align: middle; } + } + + .cellContent { overflow: hidden; height: 20px; line-height: 20px; } + .cellContent { + .empty { display: block; } + } + + .cellContent.c-longText { + .name { -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; } + } } } diff --git a/src/scss/theme/dark/block.scss b/src/scss/theme/dark/block.scss index 623f6c9eb9..18778c1a04 100644 --- a/src/scss/theme/dark/block.scss +++ b/src/scss/theme/dark/block.scss @@ -237,6 +237,10 @@ } } + .viewContent.viewGraph { + canvas { background: $colorBgPrimary; } + } + .content { .scrollWrap { background: $colorBgPrimary; } } diff --git a/src/ts/app.tsx b/src/ts/app.tsx index 6017a2ba55..914a108b9e 100644 --- a/src/ts/app.tsx +++ b/src/ts/app.tsx @@ -512,8 +512,8 @@ class App extends React.Component { }); }; - onSpellcheck (e: any, param: any) { - if (!param.misspelledWord) { + onSpellcheck (e: any, misspelledWord: string, dictionarySuggestions: string[], x: number, y: number, rect: any) { + if (!misspelledWord) { return; }; @@ -522,34 +522,60 @@ class App extends React.Component { const win = $(window); const rootId = keyboard.getRootId(); const { focused, range } = focus.state; - const options: any = param.dictionarySuggestions.map(it => ({ id: it, name: it })); - const obj = Mark.cleanHtml($(`#block-${focused} #value`).html()); - const value = String(obj.get(0).innerText || ''); + const options: any = dictionarySuggestions.map(it => ({ id: it, name: it })); + const element = $(document.elementFromPoint(x, y)); + const isInput = element.is('input'); + const isTextarea = element.is('textarea'); + const isEditable = element.is('.editable'); options.push({ id: 'add-to-dictionary', name: translate('spellcheckAdd') }); menuStore.open('select', { + className: 'fromBlock', + classNameWrap: 'fromPopup', recalcRect: () => { - const rect = UtilCommon.getSelectionRect(); return rect ? { ...rect, y: rect.y + win.scrollTop() } : null; }, - onOpen: () => { menuStore.close('blockContext'); }, - onClose: () => { keyboard.disableContextOpen(false); }, + onOpen: () => menuStore.close('blockContext'), + onClose: () => keyboard.disableContextOpen(false), data: { options, onSelect: (e: any, item: any) => { raf(() => { - focus.apply(); - switch (item.id) { default: { - blockStore.updateContent(rootId, focused, { text: value }); - UtilData.blockInsertText(rootId, focused, item.id, range.from, range.to); + if (focused) { + focus.apply(); + + const obj = Mark.cleanHtml($(`#block-${focused} #value`).html()); + const value = String(obj.get(0).innerText || ''); + + blockStore.updateContent(rootId, focused, { text: value }); + UtilData.blockInsertText(rootId, focused, item.id, range.from, range.to); + } else + if (isInput || isTextarea || isEditable) { + let value = ''; + if (isInput || isTextarea) { + value = String(element.val()); + } else + if (isEditable) { + value = String((element.get(0) as any).innerText || ''); + }; +; + value = value.replace(new RegExp(`${misspelledWord}`, 'g'), item.id); + + if (isInput || isTextarea) { + element.val(value); + } else + if (isEditable) { + element.text(value); + }; + }; break; }; case 'add-to-dictionary': { - Renderer.send('spellcheckAdd', param.misspelledWord); + Renderer.send('spellcheckAdd', misspelledWord); break; }; diff --git a/src/ts/component/block/bookmark.tsx b/src/ts/component/block/bookmark.tsx index f55042c640..2dafecfe3e 100644 --- a/src/ts/component/block/bookmark.tsx +++ b/src/ts/component/block/bookmark.tsx @@ -10,7 +10,6 @@ const BlockBookmark = observer(class BlockBookmark extends React.Component { + window.setTimeout(() => { if (!this._isMounted) { return; }; @@ -274,10 +269,8 @@ const BlockBookmark = observer(class BlockBookmark extends React.Component { + refGraph.setRootId(object.id); + }); + }; + }; + if ([ I.ViewType.Calendar ].includes(view.type)) { UtilObject.openPopup(object); } else { @@ -1334,6 +1343,15 @@ const BlockDataview = observer(class BlockDataview extends React.Component { + const { block, getWrapperWidth } = this.props; + + if (getWrapperWidth) { + const node = $(this.node); + const obj = $(`#block-${block.id}`); + + node.width() <= getWrapperWidth() / 2 ? obj.addClass('isVertical') : obj.removeClass('isVertical'); + }; + if (this.refControls && this.refControls.resize) { this.refControls.resize(); }; diff --git a/src/ts/component/block/dataview/controls.tsx b/src/ts/component/block/dataview/controls.tsx index 9a45d5ea4d..f80e3e5cf9 100644 --- a/src/ts/component/block/dataview/controls.tsx +++ b/src/ts/component/block/dataview/controls.tsx @@ -3,7 +3,7 @@ import $ from 'jquery'; import { observer } from 'mobx-react'; import { observable } from 'mobx'; import { Icon, Button, Filter } from 'Component'; -import { C, I, UtilCommon, analytics, Relation, keyboard, translate, UtilObject, UtilMenu } from 'Lib'; +import { C, I, UtilCommon, analytics, Relation, keyboard, translate, UtilObject, UtilMenu, Dataview } from 'Lib'; import { menuStore, dbStore, blockStore } from 'Store'; import { SortableContainer, SortableElement } from 'react-sortable-hoc'; import Head from './head'; @@ -49,6 +49,7 @@ const Controls = observer(class Controls extends React.Component { const isAllowedObject = this.props.isAllowedObject(); const isAllowedTemplate = UtilObject.isAllowedTemplate(getTypeId()) || (target && UtilObject.isSetLayout(target.layout) && hasSources); const cmd = keyboard.cmdSymbol(); + const tooltip = Dataview.getCreateTooltip(rootId, block.id, target.id, view.id); if (isAllowedTemplate) { buttonWrapCn.push('withSelect'); @@ -163,7 +164,7 @@ const Controls = observer(class Controls extends React.Component {