fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-19 02:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Clean up text input (#506)

Browse Source 
* Fix firefox text input

* Fix descenders below bounding box

* Fix chromium empty text

* Descenders back below baseline

* Fix trailing newline on chromium

* Reinstate correct baseline height

* Fix highlighted new line on empty text

* Add comment for trailing new line removal

* Extract cleanupTextInput to a separate file

* Function import simplification

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube
2022-02-04 04:26:44 +00:00
committed by Keavon Chambers
parent dd36339605
commit 376f4da480
3 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/panels/Document.vue
View File

@@ -192,9 +192,9 @@
}
}
foreignObject {
width: 10000px;
height: 10000px;
overflow: visible;
width: 1px;
height: 1px;
div {
color: black;
@@ -245,6 +245,8 @@ import {
DisplayEditableTextbox,
} from "@/dispatcher/js-messages";
import { textInputCleanup } from "@/lifetime/input";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
@@ -379,19 +381,22 @@ export default defineComponent({
this.canvasCursor = updateMouseCursor.cursor;
});
this.editor.dispatcher.subscribeJsMessage(TriggerTextCommit, () => {
if (this.textInput) this.editor.instance.on_change_text(this.textInput.textContent || "");
if (this.textInput) this.editor.instance.on_change_text(textInputCleanup(this.textInput.innerText));
});
this.editor.dispatcher.subscribeJsMessage(DisplayEditableTextbox, (displayEditableTextbox) => {
this.textInput = document.createElement("DIV") as HTMLDivElement;
this.textInput.id = "editable-textbox";
this.textInput.textContent = displayEditableTextbox.text;
if (displayEditableTextbox.text === "") this.textInput.textContent = "";
else this.textInput.textContent = `${displayEditableTextbox.text}\n`;
this.textInput.contentEditable = "true";
this.textInput.style.width = displayEditableTextbox.line_width ? `${displayEditableTextbox.line_width}px` : "max-content";
this.textInput.style.height = "auto";
this.textInput.style.fontSize = `${displayEditableTextbox.font_size}px`;
this.textInput.oninput = (): void => {
if (this.textInput) this.editor.instance.update_bounds(this.textInput.textContent || "");
if (this.textInput) this.editor.instance.update_bounds(textInputCleanup(this.textInput.innerText));
};
});