Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-24 02:20:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 https://github.com/siyuan-note/siyuan/issues/7564

Browse source
This commit is contained in:
Vanessa 2023-03-04 11:45:36 +08:00
parent d8e74384a1
commit 885b1ffad3
8 changed files with 38 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/assets/scss/component/_menu.scss
View file

@ -8,6 +8,7 @@
z-index: 210; z-index: 210;
max-height: 80vh; max-height: 80vh;
overflow: auto; overflow: auto;
box-sizing: border-box;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;

8
app/src/assets/scss/mobile.scss
View file

@ -332,8 +332,12 @@
} }
} }
.b3-menu__accelerator { .b3-menu {
display: none; width: 100%;
&__accelerator {
display: none;
}
} }
#historyContainer { #historyContainer {

4
app/src/constants.ts
View file

@ -1,3 +1,5 @@
import {isMobile} from "./util/functions";
declare const SIYUAN_VERSION: string; declare const SIYUAN_VERSION: string;
declare const NODE_ENV: string; declare const NODE_ENV: string;
@ -36,7 +38,7 @@ export abstract class Constants {
public static readonly SIYUAN_EXPORT_PREVENT: string = "siyuan-export-prevent"; public static readonly SIYUAN_EXPORT_PREVENT: string = "siyuan-export-prevent";
// size // size
public static readonly SIZE_TOOLBAR_HEIGHT: number = 32; public static readonly SIZE_TOOLBAR_HEIGHT: number = isMobile() ? 0 : 32;
public static readonly SIZE_GET_MAX = 102400; public static readonly SIZE_GET_MAX = 102400;
public static readonly SIZE_UNDO = 64; public static readonly SIZE_UNDO = 64;
public static readonly SIZE_TITLE = 512; public static readonly SIZE_TITLE = 512;

31
app/src/mobile/util/keyboardToolbar.ts
View file

@ -3,7 +3,8 @@ import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "../.
import {moveToDown, moveToUp} from "../../protyle/wysiwyg/move"; import {moveToDown, moveToUp} from "../../protyle/wysiwyg/move";
import {Constants} from "../../constants"; import {Constants} from "../../constants";
import {focusByRange, getSelectionPosition} from "../../protyle/util/selection"; import {focusByRange, getSelectionPosition} from "../../protyle/util/selection";
import {getEventName} from "../../protyle/util/compatibility"; import {removeBlock} from "../../protyle/wysiwyg/remove";
import {hintSlash} from "../../protyle/hint/extend";
export const showKeyboardToolbar = (bottom = 0) => { export const showKeyboardToolbar = (bottom = 0) => {
if (getSelection().rangeCount === 0 || window.siyuan.config.editor.readOnly || window.siyuan.config.readonly) { if (getSelection().rangeCount === 0 || window.siyuan.config.editor.readOnly || window.siyuan.config.readonly) {
@ -105,12 +106,12 @@ export const initKeyboardToolbar = () => {
<span class="keyboard__split"></span> <span class="keyboard__split"></span>
<button data-type="add"><svg><use xlink:href="#iconAdd"></use></svg></button> <button data-type="add"><svg><use xlink:href="#iconAdd"></use></svg></button>
<button data-type="goinline"><svg class="keyboard__svg--big"><use xlink:href="#iconBIU"></use></svg></button> <button data-type="goinline"><svg class="keyboard__svg--big"><use xlink:href="#iconBIU"></use></svg></button>
<button data-type="indent"><svg><use xlink:href="#iconTrashcan"></use></svg></button> <button data-type="remove"><svg><use xlink:href="#iconTrashcan"></use></svg></button>
<span class="keyboard__split"></span> <span class="keyboard__split"></span>
<button data-type="undo"><svg><use xlink:href="#iconUndo"></use></svg></button> <button data-type="undo"><svg><use xlink:href="#iconUndo"></use></svg></button>
<button data-type="redo"><svg><use xlink:href="#iconRedo"></use></svg></button> <button data-type="redo"><svg><use xlink:href="#iconRedo"></use></svg></button>
<button data-type="appearance"><svg><use xlink:href="#iconFont"></use></svg></button> <button data-type="block"><svg><use xlink:href="#iconParagraph"></use></svg></button>
<button data-type="block"><svg><use xlink:href="#iconMore"></use></svg></button> <button data-type="more"><svg><use xlink:href="#iconMore"></use></svg></button>
<span class="keyboard__split"></span> <span class="keyboard__split"></span>
<button data-type="moveup"><svg><use xlink:href="#iconUp"></use></svg></button> <button data-type="moveup"><svg><use xlink:href="#iconUp"></use></svg></button>
<button data-type="movedown"><svg><use xlink:href="#iconDown"></use></svg></button> <button data-type="movedown"><svg><use xlink:href="#iconDown"></use></svg></button>
@ -182,7 +183,7 @@ export const initKeyboardToolbar = () => {
} }
// inline element // inline element
if (["a", "block-ref", "inline-math", "inline-memo", "text"].includes(type)) { if (["a", "block-ref", "inline-math", "inline-memo", "text"].includes(type)) {
protyle.toolbar.element.querySelector(`[data-type="${type}"]`).dispatchEvent(new CustomEvent("text" === type ? getEventName() : "click")); protyle.toolbar.element.querySelector(`[data-type="${type}"]`).dispatchEvent(new CustomEvent("click"));
return; return;
} else if (["strong", "em", "s", "code", "mark", "tag", "u", "sup", "clear", "sub", "kbd"].includes(type)) { } else if (["strong", "em", "s", "code", "mark", "tag", "u", "sup", "clear", "sub", "kbd"].includes(type)) {
protyle.toolbar.setInlineMark(protyle, type, "toolbar"); protyle.toolbar.setInlineMark(protyle, type, "toolbar");
@ -196,16 +197,26 @@ export const initKeyboardToolbar = () => {
focusByRange(range); focusByRange(range);
return; return;
} else if (type === "remove") { } else if (type === "remove") {
// TODO nodeElement.classList.add("protyle-wysiwyg--select");
removeBlock(protyle, nodeElement, range);
return; return;
} else if (type === "add") { } else if (type === "add") {
// TODO protyle.hint.splitChar = "/";
protyle.hint.lastIndex = -1;
protyle.hint.genHTML(hintSlash("", protyle), protyle);
focusByRange(range);
return; return;
} else if (type === "appearance") { } else if (type === "more") {
// TODO protyle.breadcrumb.showMenu(protyle, {
x: 0,
y: 0
});
focusByRange(range);
return; return;
} else if (type === "block") { } else if (type === "block") {
// TODO protyle.gutter.renderMenu(protyle, nodeElement);
window.siyuan.menus.menu.popup({x: 0, y:0}, true);
focusByRange(range);
return; return;
} else if (type === "outdent") { } else if (type === "outdent") {
listOutdent(protyle, [nodeElement.parentElement], range); listOutdent(protyle, [nodeElement.parentElement], range);

2
app/src/protyle/breadcrumb/index.ts
View file

@ -147,7 +147,7 @@ export class Breadcrumb {
this.mediaRecorder.startRecordingNewWavFile(); this.mediaRecorder.startRecordingNewWavFile();
} }
private showMenu(protyle: IProtyle, position: { x: number, y: number }) { public showMenu(protyle: IProtyle, position: { x: number, y: number }) {
let id; let id;
const cursorNodeElement = hasClosestBlock(getEditorRange(protyle.element).startContainer); const cursorNodeElement = hasClosestBlock(getEditorRange(protyle.element).startContainer);
if (cursorNodeElement) { if (cursorNodeElement) {

2
app/src/protyle/hint/index.ts
View file

@ -581,7 +581,7 @@ ${unicode2Emoji(emoji.unicode, true)}</button>`;
range.deleteContents(); range.deleteContents();
focusByRange(range); focusByRange(range);
if (["a", "block-ref", "inline-math", "inline-memo", "text"].includes(value)) { if (["a", "block-ref", "inline-math", "inline-memo", "text"].includes(value)) {
protyle.toolbar.element.querySelector(`[data-type="${value}"]`).dispatchEvent(new CustomEvent("block-ref" === value ? getEventName() : "click")); protyle.toolbar.element.querySelector(`[data-type="${value}"]`).dispatchEvent(new CustomEvent("click"));
return; return;
} }
protyle.toolbar.setInlineMark(protyle, value, "range"); protyle.toolbar.setInlineMark(protyle, value, "range");

8
app/src/protyle/toolbar/Font.ts
View file

@ -1,4 +1,4 @@
import {getEventName, setStorageVal, updateHotkeyTip} from "../util/compatibility"; import {setStorageVal, updateHotkeyTip} from "../util/compatibility";
import {ToolbarItem} from "./ToolbarItem"; import {ToolbarItem} from "./ToolbarItem";
import {setPosition} from "../../util/setPosition"; import {setPosition} from "../../util/setPosition";
import {focusByRange, getSelectionPosition} from "../util/selection"; import {focusByRange, getSelectionPosition} from "../util/selection";
@ -10,7 +10,7 @@ export class Font extends ToolbarItem {
constructor(protyle: IProtyle, menuItem: IMenuItem) { constructor(protyle: IProtyle, menuItem: IMenuItem) {
super(protyle, menuItem); super(protyle, menuItem);
this.element.addEventListener(getEventName(), () => { this.element.addEventListener("click", () => {
if (protyle.toolbar.range.toString() === "") { if (protyle.toolbar.range.toString() === "") {
return; return;
} }
@ -115,13 +115,13 @@ const fontMenu = (protyle: IProtyle) => {
</div> </div>
<div class="fn__hr"></div> <div class="fn__hr"></div>
<button class="b3-button b3-button--cancel" data-type="clear"><svg><use xlink:href="#iconTrashcan"></use></svg>${window.siyuan.languages.clearFontStyle}</button>`; <button class="b3-button b3-button--cancel" data-type="clear"><svg><use xlink:href="#iconTrashcan"></use></svg>${window.siyuan.languages.clearFontStyle}</button>`;
element.addEventListener(getEventName(), function (event: Event) { element.addEventListener("click", function (event: Event) {
let target = event.target as HTMLElement; let target = event.target as HTMLElement;
while (target && !target.isEqualNode(element)) { while (target && !target.isEqualNode(element)) {
const dataType = target.getAttribute("data-type"); const dataType = target.getAttribute("data-type");
if (target.tagName === "BUTTON") { if (target.tagName === "BUTTON") {
if (dataType === "clear") { if (dataType === "clear") {
protyle.toolbar.setInlineMark(protyle, "clear", "range", {type:"text"}); protyle.toolbar.setInlineMark(protyle, "clear", "range", {type: "text"});
} else { } else {
fontEvent(protyle, dataType, target.style.backgroundColor || target.style.color || target.textContent); fontEvent(protyle, dataType, target.style.backgroundColor || target.style.color || target.textContent);
} }

2
app/src/protyle/wysiwyg/keydown.ts
View file

@ -1295,7 +1295,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
if (matchHotKey(menuItem.hotkey, event)) { if (matchHotKey(menuItem.hotkey, event)) {
protyle.toolbar.range = getEditorRange(protyle.wysiwyg.element); protyle.toolbar.range = getEditorRange(protyle.wysiwyg.element);
if (["a", "block-ref", "inline-math", "inline-memo", "text"].includes(menuItem.name)) { if (["a", "block-ref", "inline-math", "inline-memo", "text"].includes(menuItem.name)) {
protyle.toolbar.element.querySelector(`[data-type="${menuItem.name}"]`).dispatchEvent(new CustomEvent("block-ref" === menuItem.name ? getEventName() : "click")); protyle.toolbar.element.querySelector(`[data-type="${menuItem.name}"]`).dispatchEvent(new CustomEvent("click"));
return true; return true;
} }
protyle.toolbar.setInlineMark(protyle, menuItem.name, "range"); protyle.toolbar.setInlineMark(protyle, menuItem.name, "range");