Hello,
Please refer to my previous answer where I give you the ".my-custom-class" block including the background-image of the "my-custom-classes.css" that you can use with the https://github.com/MyScript/iinkJS/blob/master/examples/v4/websocket_text_customize_editor_css.html example.
We don't have a ready to use example, so you have to build it yourself.
Best regards,
Gwenaëlle
Brainstrong911
To display the same pen strokes in a second editor, an import object is built from the exported object as below:
editorElement.addEventListener('exported', (event) => {
const exports = event.detail.exports;
console.log(exports);
console.log(exports["application/vnd.myscript.jiix"]);
toImport = exports['application/vnd.myscript.jiix'];
........
}
However, it turns out that the structure of the above exported object (event.detail.exports) depends on the iink's protocol of whether it is WEBSOCKET or REST for the mimeType of application/vnd.myscript.jiix. Because of this difference, it is unable to display the pen strokes with REST from the exported object using this line:
toImport = exports['application/vnd.myscript.jiix'];
Why is the structure of the exported object different for different protocols? How to build pen strokes from the exported object of the protocol REST for import?
---------------------------------------------------------
The exported object of WEBSOCKET:
Object { "application/x-latex": "y", "application/vnd.myscript.jiix": "{\n \"type\": \"Math\",\n \"expressions\": [ {\n \"type\": \"symbol\",\n \"id\": \"math/12\",\n \"label\": \"y\",\n \"items\": [ {\n \"timestamp\": \"2023-12-17 13:49:32.617000\",\n \"X\": [ 102.393745, 103.1875, 103.45208, 104.245827, 104.510414, 105.304161, 106.097916, 106.891663,\n 107.42083, 107.685417, 107.685417, 108.214577, 108.479164, 108.479164, 108.479164, 109.008331,\n 109.008331, 109.008331, 108.743744, 108.743744, 108.214577, 107.15625, 105.833328, 105.568748,\n 104.510414, 103.1875 ],\n \"Y\": [ 26.4583321, 27.78125, 28.8395824, 29.3687496, 30.1624985, 30.6916656, 30.1624985, 30.1624985,\n 29.3687496, 28.0458317, 27.2520828, 26.1937485, 25.135416, 24.3416653, 25.9291668, 28.0458317,\n 29.3687496, 30.6916656, 31.4854164, 32.2791672, 33.6020813, 33.6020813, 34.1312485, 34.9249992,\n 35.4541664, 35.9833336 ],\n \"F\": [ 0.5, 0.758526385, 0.718526483, 0.700710416, 0.683189929, 0.700710416, 0.700710416, 0.6761536,\n 0.700710416, 0.746184707, 0.6761536, 0.729212582, 0.718526483, 0.6761536, 0.766522586, 0.80248946,\n 0.743674636, 0.743674636, 0.683189929, 0.6761536, 0.753112853, 0.714515865, 0.753112853, 0.683189929,\n 0.729212582, 0.753112853 ],\n \"T\": [ 0, 232, 266, 333, 399, 500, 566, 600,\n 633, 699, 733, 766, 799, 832, 1233, 1266,\n 1299, 1333, 1366, 1400, 1466, 1600, 1633, 1666,\n 1933, 2000 ],\n \"type\": \"stroke\",\n \"id\": \"0000000001003300ff00\"\n } ]\n } ],\n \"id\": \"MainBlock\",\n \"version\": \"3\"\n}" }
The exported object of REST:
Object { "application/x-latex": "y", "application/vnd.myscript.jiix": {…} }
"application/vnd.myscript.jiix": Object { type: "Math", id: "MainBlock", version: "3", … }
"application/x-latex": "y"
<prototype>: Object { … }