unified-doc-dom
DOM APIs for unified-doc.
Install
npm install unified-doc-dom
Use
;; // optionally import provided css highlight effects, or specify your own; const file = ...;const marks: id: 'a' start: 0 end: 5 id: 'b' start: 7 end: 10 ; // prepare data from file and initialize a doc instanceconst fileData = await ;const doc = ; // save files in different format { ;} { ;} // render the document and retrieve the docElement DOM elementconst docElement = ... // via doc.compile() // register click events and custom tooltip implementations with registerMarks {...} {...} { } // highlights a mark (e.g. triggered from a button's click event) { const cleanup = ; // use the cleanup function appropriately in a controlled manner} // update/add marks on text selection { { marks; } const cleanup = ; // use the cleanup function appropriately in a controlled manner}
API
fromFile(file)
toFile(fileData)
saveFile(fileData)
highlight(docElement, elementId[, options])
registerMarks(docElement, marks, callbacks)
selectText(docElement[, options])
The term doc
used below refers to a unified-doc
instance. Please refer to unified-doc for detailed documentation of doc
API methods.
fromFile(file)
Interface
Returns FileData
from a JS File
.
Can only be used asynchronously. This method is useful to prepare file data that will be passed to unified-doc
during initialization (e.g. name
, content
).
Example
; const file = File'> some **strong** content' 'doc.md' type: 'text/markdown' ;const fileData = await ; ;
toFile(fileData)
Interface
;
Returns a JS File
from FileData
.
This method is useful to convert file data into a JS File
object. When used together with doc.file()
, this is an easy way to retrieve file representations in supported formats.
Example
;; const doc = ; ;
saveFile(fileData)
Interface
;
Saves a JS File
from FileData
.
Implemented using the file-saver
package and toFile
method. This method is useful to save the file data returned by the doc.file()
.
Example
;; const doc = { ;} { ;} { ;}
Related interfaces
highlight(docElement, elementId[, options])
Interface
;
Highlights all elements that match a provided elementId
under a docElement
rendered by unified-doc
.
The highlighter draws a bounding box around all queried elements and removes itself after a specified duration. The method returns a cleanup function that can be called appropriately.
Example
; // optionally import provided css highlight effects, or specify your own; const docElement = ...; // document DOM element rendered by unified-doc const options = background: 'rgba(255, 0, 0, 0.3)' durationMs: 4000 highlighterClassName: 'custom-highlighter' `[data-mark-id='']`; { const cleanup = ; // you can use and call the cleanup method in a controlled way}
Related interfaces
registerMarks(docElement, marks, callbacks)
Interface
;
Registers all mark
elements with provided callbacks
under a docElement
rendered by unified-doc
.
Related interfaces
;
selectText(docElement[, options])
Interface
;
Capture selected text under the docElement
rendered by unified-doc
.
Implemented using the rangy
package. The selected text object is Mark
-compatible, allowing easy integration with marks
used by unified-doc
.
Related interfaces