Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2024-12-22 15:23:29 -05:00
Code Issues Activity

docs: add pasteImage to demo and document the event

Browse source
This commit is contained in:
Seth Falco 2023-03-19 10:20:03 +00:00 committed by Neil Jenkins
parent 8304fd3e04
commit c84f48e480
2 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
Demo.html
View file

@ -74,7 +74,7 @@ white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;border-rad
<body> <body>
<h1>Squire Editor Demo</h1> <h1>Squire Editor Demo</h1>
<header> <header>
<p>Squire is a rich text editor primarily built for email apps. It’s designed to be integrated with your own UI framework, and so does not provide its own UI toolbar, widgets or overlays. This is a really simple demo, with the most trivial of UI integrations, to show the raw component in action. <a href="https://github.com/neilj/squire">Learn more and see the source on GitHub</a>.</p> <p>Squire is a rich text editor primarily built for email apps. It’s designed to be integrated with your own UI framework, and so does not provide its own UI toolbar, widgets or overlays. This is a really simple demo, with the most trivial of UI integrations, to show the raw component in action. <a href="https://github.com/fastmail/squire">Learn more and see the source on GitHub</a>.</p>
<p> <p>
<span id="bold">Bold</span> <span id="bold">Bold</span>
<span id="removeBold">Unbold</span> <span id="removeBold">Unbold</span>
@ -135,6 +135,23 @@ white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;border-rad
} }
}); });
editor.addEventListener('pasteImage', function(event) {
const items = [...event.detail.clipboardData.items];
const imageItems = items.filter((item) => /image/.test(item.type));
if (!imageItems.length) {
return false;
}
let reader = new FileReader();
reader.onload = (loadEvent) => {
this.insertImage(loadEvent.target.result);
}
reader.readAsDataURL(imageItems[0].getAsFile());
});
document.addEventListener( 'click', function ( e ) { document.addEventListener( 'click', function ( e ) {
var id = e.target.id, var id = e.target.id,
value; value;

6
README.md
View file

@ -4,7 +4,7 @@ Squire is an HTML5 rich text editor, which provides powerful cross-browser norma
It was designed to handle email composition for the [Fastmail](https://www.fastmail.com) web app. The most important consequence of this (and where Squire differs from most other modern rich text editors) is that it must handle arbitrary HTML, because it may be used to forward or quote emails from third-parties and must be able to preserve their HTML without breaking the formatting. This means that it can't use a more structured (but limited) internal data model (as most other modern HTML editors do) and the HTML remains the source-of-truth. The other consequence is excellent handling of multiple levels of blockquotes. It was designed to handle email composition for the [Fastmail](https://www.fastmail.com) web app. The most important consequence of this (and where Squire differs from most other modern rich text editors) is that it must handle arbitrary HTML, because it may be used to forward or quote emails from third-parties and must be able to preserve their HTML without breaking the formatting. This means that it can't use a more structured (but limited) internal data model (as most other modern HTML editors do) and the HTML remains the source-of-truth. The other consequence is excellent handling of multiple levels of blockquotes.
Squire is designed to be integrated with your own UI framework, and so does not provide its own UI toolbar, widgets or overlays. Instead, you get a component you can insert in place of a `<textarea>` and manipulate programatically, allowing you to integrate seamlessly with the rest of your application and lose the bloat of having two UI toolkits loaded. Squire is designed to be integrated with your own UI framework, and so does not provide its own UI toolbar, widgets or overlays. Instead, you get a component you can insert in place of a `<textarea>` and manipulate programmatically, allowing you to integrate seamlessly with the rest of your application and lose the bloat of having two UI toolkits loaded.
Squire supports all reasonably recent browsers. It no longer supports any version of IE. Squire supports all reasonably recent browsers. It no longer supports any version of IE.
@ -84,10 +84,10 @@ Attach an event listener to the editor. The handler can be either a function or
- **input**: The user inserted, deleted or changed the style of some text; in other words, the result for `editor.getHTML()` will have changed. - **input**: The user inserted, deleted or changed the style of some text; in other words, the result for `editor.getHTML()` will have changed.
- **pathChange**: The path (see getPath documentation) to the cursor has changed. The new path is available as the `path` property on the event's `detail` property object. - **pathChange**: The path (see getPath documentation) to the cursor has changed. The new path is available as the `path` property on the event's `detail` property object.
- **select**: The user selected some text. - **select**: The user selected some text.
- **cursor**: The user cleared their selection or moved the cursor to a - **cursor**: The user cleared their selection or moved the cursor to a different position.
different position.
- **undoStateChange**: The availability of undo and/or redo has changed. The event object has a `detail` property, which is an object with two boolean properties, `canUndo` and `canRedo` to let you know the new state. - **undoStateChange**: The availability of undo and/or redo has changed. The event object has a `detail` property, which is an object with two boolean properties, `canUndo` and `canRedo` to let you know the new state.
- **willPaste**: The user is pasting content into the document. The content that will be inserted is available as either the `fragment` property, or the `text` property for plain text, on the `detail` property of the event. You can modify this text/fragment in your event handler to change what will be pasted. You can also call the `preventDefault` on the event object to cancel the paste operation. - **willPaste**: The user is pasting content into the document. The content that will be inserted is available as either the `fragment` property, or the `text` property for plain text, on the `detail` property of the event. You can modify this text/fragment in your event handler to change what will be pasted. You can also call the `preventDefault` on the event object to cancel the paste operation.
- **pasteImage**: The user is pasting image content into the document.
The method takes two arguments: The method takes two arguments: