import * as ff from "@humansignal/core/lib/utils/feature-flags/ff";
|
import { destroy as destroyNode, flow, types } from "mobx-state-tree";
|
import { createRef } from "react";
|
import Constants from "../../../core/Constants";
|
import { customTypes } from "../../../core/CustomTypes";
|
import { errorBuilder } from "../../../core/DataValidator/ConfigValidator";
|
import { cloneNode } from "../../../core/Helpers";
|
import { AnnotationMixin } from "../../../mixins/AnnotationMixin";
|
import { STATE_CLASS_MODS } from "../../../mixins/HighlightMixin";
|
import IsReadyMixin from "../../../mixins/IsReadyMixin";
|
import ProcessAttrsMixin from "../../../mixins/ProcessAttrs";
|
import RegionsMixin from "../../../mixins/Regions";
|
import Utils from "../../../utils";
|
import { parseValue } from "../../../utils/data";
|
import { FF_SAFE_TEXT, isFF } from "../../../utils/feature-flags";
|
import { sanitizeHtml } from "../../../utils/html";
|
import messages from "../../../utils/messages";
|
import { rangeToGlobalOffset } from "../../../utils/selection-tools";
|
import { escapeHtml, isValidObjectURL } from "../../../utils/utilities";
|
import ObjectBase from "../Base";
|
import DomManager from "./domManager";
|
|
const WARNING_MESSAGES = {
|
dataTypeMistmatch: () => "Do not put text directly in task data if you use valueType=url.",
|
badURL: (url) => `URL (${escapeHtml(url)}) is not valid.`,
|
secureMode: () => 'In SECURE MODE valueType is set to "url" by default.',
|
loadingError: (url, error) => `Loading URL (${url}) unsuccessful: ${error}`,
|
};
|
|
/**
|
* WARNING: this is not a real doc, that's just a main reference; real docs are in their stub files: HyperText and Text
|
*
|
* RichText tag shows text or HTML and allows labeling
|
* @example
|
* <RichText name="text-1" value="$text" granularity="symbol" highlightColor="#ff0000" />
|
* @example
|
* <Text name="text-1" value="$url" valueType="url" highlightColor="#ff0000" />
|
* @example
|
* <HyperText name="text-1" value="$html" highlightColor="#ff0000" />
|
* @name Text
|
* @param {string} name - name of the element
|
* @param {string} value - value of the element
|
* @param {url|text} [valueType=url|text] – source of the data, check (Data retrieval)[https://labelstud.io/guide/tasks.html] page for more inforamtion
|
* @param {boolean} [inline=false] - whether to embed html directly to LS or use iframe (only HyperText)
|
* @param {boolean} [saveTextResult=true] – whether or not to save selected text to the serialized data
|
* @param {boolean} [selectionEnabled=true] - enable or disable selection
|
* @param {boolean} [clickableLinks=false] – allow annotator to open resources from links
|
* @param {string} [highlightColor] - hex string with highlight color, if not provided uses the labels color
|
* @param {boolean} [showLabels=true] - whether or not to show labels next to the region
|
* @param {none|base64|base64unicode} [encoding] - decode value from an encoded string
|
* @param {symbol|word|sentence|paragraph} [granularity] - control region selection granularity
|
*/
|
const TagAttrs = types.model("RichTextModel", {
|
value: types.maybeNull(types.string),
|
|
/** Defines the type of data to be shown */
|
valuetype: types.optional(types.enumeration(["text", "url"]), () => (window.LS_SECURE_MODE ? "url" : "text")),
|
|
inline: false,
|
|
/** Whether or not to save selected text to the serialized data */
|
savetextresult: types.optional(types.enumeration(["none", "no", "yes"]), () =>
|
window.LS_SECURE_MODE ? "no" : "none",
|
),
|
|
selectionenabled: types.optional(types.boolean, true),
|
|
clickablelinks: false,
|
|
highlightcolor: types.maybeNull(customTypes.color),
|
|
showlabels: types.maybeNull(types.boolean),
|
|
encoding: types.optional(types.enumeration(["none", "base64", "base64unicode"]), "none"),
|
|
granularity: types.optional(types.enumeration(["symbol", "word", "sentence", "paragraph"]), "symbol"),
|
});
|
|
const Model = types
|
.model("RichTextModel", {
|
type: "richtext",
|
_value: types.optional(types.maybeNull(types.string), null),
|
})
|
.views((self) => ({
|
get canResizeSpans() {
|
return ff.isActive(ff.FF_ADJUSTABLE_SPANS) && self.type === "text" && !self.isReadOnly();
|
},
|
get hasStates() {
|
const states = self.states();
|
|
return states && states.length > 0;
|
},
|
|
states() {
|
return self.annotation.toNames.get(self.name);
|
},
|
|
activeStates() {
|
const states = self.states();
|
|
return states ? states.filter((s) => s.isLabeling && s.isSelected) : null;
|
},
|
|
get isLoaded() {
|
return self._isLoaded && self._loadedForAnnotation === self.annotation?.id;
|
},
|
|
get isReady() {
|
return self.isLoaded && self._isReady;
|
},
|
|
// we are displaying label for either data-label OR data-index
|
get styles() {
|
return `
|
.htx-highlight {
|
cursor: pointer;
|
border: 1px dashed transparent;
|
}
|
.htx-highlight[data-index]::after,
|
.htx-highlight[data-label]::after {
|
padding: 2px 2px;
|
font-size: 9.5px;
|
font-weight: bold;
|
font-family: var(--font-mono);
|
vertical-align: super;
|
content: attr(data-label);
|
line-height: 0;
|
}
|
.htx-highlight[data-index]:not([data-label])::after {
|
content: attr(data-index);
|
}
|
.htx-highlight.${STATE_CLASS_MODS.highlighted} {
|
position: relative;
|
cursor: ${Constants.LINKING_MODE_CURSOR};
|
border-color: rgb(0, 174, 255);
|
}
|
.htx-highlight.${STATE_CLASS_MODS.hidden} {
|
border: none;
|
padding: 0;
|
background: transparent !important;
|
cursor: inherit;
|
// pointer-events: none;
|
}
|
.htx-highlight.${STATE_CLASS_MODS.hidden}::before,
|
.htx-highlight.${STATE_CLASS_MODS.hidden}::after,
|
.htx-highlight.${STATE_CLASS_MODS.noLabel}::after {
|
display: none;
|
}
|
`;
|
},
|
// This is not a real getter as it is dependant on ref which cannot be cached in the right way
|
getIframeBodyNode() {
|
const mountNode = self.mountNodeRef.current;
|
return mountNode?.contentDocument?.body;
|
},
|
// This is not a real getter as it is dependant on ref which cannot be cached in the right way
|
getRootNode() {
|
return self.getIframeBodyNode() ?? self.mountNodeRef.current;
|
},
|
}))
|
.volatile(() => ({
|
// the only visible iframe/div, that contains rendered value
|
mountNodeRef: createRef(),
|
|
_isReady: false,
|
_isLoaded: false,
|
_loadedForAnnotation: null,
|
}))
|
.actions((self) => {
|
let domManager;
|
|
return {
|
setLoaded(value = true) {
|
if (value) self.onLoaded();
|
|
self._isLoaded = value;
|
self._loadedForAnnotation = self.annotation?.id;
|
},
|
|
onLoaded() {
|
if (self.mountNodeRef.current) {
|
domManager = new DomManager(self.mountNodeRef.current);
|
}
|
},
|
|
onDispose() {
|
self.regs.forEach((region) => {
|
// remove all spans from the visible node, because without cleaning them, the regions won't be updated
|
region.clearSpans();
|
});
|
},
|
|
updateValue: flow(function* (store) {
|
const valueFromTask = parseValue(self.value, store.task.dataObj);
|
const value = yield self.resolveValue(valueFromTask);
|
|
if (self.valuetype === "url") {
|
const url = value;
|
|
if (!isValidObjectURL(url, true)) {
|
const message = [WARNING_MESSAGES.badURL(url), WARNING_MESSAGES.dataTypeMistmatch()];
|
|
if (window.LS_SECURE_MODE) message.unshift(WARNING_MESSAGES.secureMode());
|
|
self.annotationStore.addErrors([errorBuilder.generalError(message.join("<br/>\n"))]);
|
self.setRemoteValue("");
|
return;
|
}
|
|
try {
|
const response = yield fetch(url);
|
const { ok, status, statusText } = response;
|
|
if (!ok) throw new Error(`${status} ${statusText}`);
|
|
self.setRemoteValue(yield response.text());
|
} catch (error) {
|
const message = messages.ERR_LOADING_HTTP({ attr: self.value, error: String(error), url });
|
|
self.annotationStore.addErrors([errorBuilder.generalError(message)]);
|
self.setRemoteValue("");
|
}
|
} else {
|
self.setRemoteValue(value);
|
}
|
}),
|
|
setRemoteValue(val) {
|
self.loaded = true;
|
|
if (self.encoding === "base64") val = atob(val);
|
if (self.encoding === "base64unicode") val = Utils.Checkers.atobUnicode(val);
|
|
// clean up the html — remove scripts and iframes
|
// nodes count better be the same, so replace them with stubs
|
// we should not sanitize text tasks because we already have htmlEscape in view.js
|
if (isFF(FF_SAFE_TEXT) && self.type === "text") {
|
self._value = String(val);
|
} else {
|
self._value = sanitizeHtml(String(val));
|
}
|
|
self._regionsCache.forEach(({ region, annotation }) => {
|
region.setText(self._value.substring(region.startOffset, region.endOffset));
|
self.regions.push(region);
|
annotation.addRegion(region);
|
});
|
|
self._regionsCache = [];
|
},
|
|
afterCreate() {
|
self._regionsCache = [];
|
|
if (self.type === "text") self.inline = true;
|
|
// security measure, if valuetype is set to url then LS
|
// doesn't save the text into the result, otherwise it does
|
// can be aslo directly configured
|
if (self.savetextresult === "none") {
|
if (self.valuetype === "url") self.savetextresult = "no";
|
else if (self.valuetype === "text") self.savetextresult = "yes";
|
}
|
},
|
|
beforeDestroy() {
|
domManager?.removeStyles(self.name);
|
domManager?.destroy();
|
domManager = null;
|
},
|
|
needsUpdate() {
|
if (self.isLoaded === false) return;
|
|
self.setReady(false);
|
|
const styles = {
|
[self.name]: self.styles,
|
};
|
|
self.regs.forEach((region) => {
|
try {
|
// will be initialized only once
|
region.initRangeAndOffsets();
|
region.applyHighlight(true);
|
region.updateHighlightedText();
|
styles[region.identifier] = region.styles;
|
} catch (err) {
|
console.error(err);
|
}
|
});
|
self.setStyles(styles);
|
|
self.setReady(true);
|
},
|
|
setStyles(stylesMap) {
|
domManager?.setStyles(stylesMap);
|
},
|
removeStyles(ids) {
|
domManager?.removeStyles(ids);
|
},
|
|
/**
|
* Converts global offsets to relative offsets.
|
*
|
* @param {Object} start - The start global offset in codepoints.
|
* @param {Object} end - The end global offset in codepoints.
|
* @returns {undefined|{start: string, startOffset: number, end: string, endOffset: number}} - The relative offsets.
|
*/
|
globalOffsetsToRelativeOffsets({ start, end }) {
|
return domManager.globalOffsetsToRelativeOffsets(start, end);
|
},
|
|
/**
|
* Calculates relative offsets to global offsets for a given range in the document.
|
*
|
* @param {Node} start - The starting node of the range.
|
* @param {number} startOffset - The offset within the starting node.
|
* @param {Node} end - The ending node of the range.
|
* @param {number} endOffset - The offset within the ending node.
|
* @return {number[]|undefined} - An array containing the calculated global offsets in codepoints in the form of [startGlobalOffset, endGlobalOffset].
|
*/
|
relativeOffsetsToGlobalOffsets(start, startOffset, end, endOffset) {
|
return domManager.relativeOffsetsToGlobalOffsets(start, startOffset, end, endOffset);
|
},
|
|
/**
|
* Converts the given range to its global offset.
|
*
|
* @param {Range} range - The range to convert.
|
* @returns {number[]|undefined} - The global offsets of the range in the form of [startGlobalOffset, endGlobalOffset].
|
*/
|
rangeToGlobalOffset(range) {
|
return domManager.rangeToGlobalOffset(range);
|
},
|
|
/**
|
* Creates spans in the DOM for a given range of global offsets.
|
*
|
* @param {Object} offsets - The start and end offsets of the range.
|
* @param {number} offsets.start - The starting offset in codepoints.
|
* @param {number} offsets.end - The ending offset in codepoints.
|
*
|
* @returns {Array} - An array of DOM spans created for the range.
|
*/
|
createSpansByGlobalOffsets({ start, end }) {
|
return domManager.createSpans(start, end);
|
},
|
|
/**
|
* Removes spans from the given array based on the provided start and end global offsets.
|
*
|
* @param {Array} spans - The array of spans to be modified.
|
* @param {Object} offsets - The start and end global offsets.
|
* @param {number} offsets.start - The start global offset in codepoints.
|
* @param {number} offsets.end - The end global offset in codepoints.
|
* @returns {void} - Nothing is returned.
|
*/
|
removeSpansInGlobalOffsets(spans, { start, end }) {
|
return domManager?.removeSpans(spans, start, end);
|
},
|
|
/**
|
* Get text content at the position set by global offsets.
|
*
|
* @param {Object} offsets - The start and end global offsets.
|
* @param {number} offsets.start - The start global offset in codepoints.
|
* @param {number} offsets.end - The end global offset in codepoints.
|
* @returns {string} - The text content between the start and end offsets.
|
*/
|
getTextFromGlobalOffsets({ start, end }) {
|
return domManager.getText(start, end);
|
},
|
|
setHighlight(region) {
|
self.regs.forEach((r) => r.setHighlight(false));
|
if (!region) return;
|
|
if (region.annotation.isLinkingMode) {
|
region.setHighlight(true);
|
}
|
},
|
|
addRegion(range, doubleClickLabel) {
|
const states = self.getAvailableStates();
|
|
if (states.length === 0) return;
|
|
const [control, ...rest] = states;
|
const values = doubleClickLabel?.value ?? control.selectedValues();
|
const labels = { [control.valueType]: values };
|
let restSelectedStates;
|
if (!ff.isActive(ff.FF_MULTIPLE_LABELS_REGIONS)) {
|
// Clone labels nodes to avoid unselecting them on creating result
|
restSelectedStates = rest.map((state) => cloneNode(state));
|
}
|
|
const area = ff.isActive(ff.FF_MULTIPLE_LABELS_REGIONS)
|
? self.annotation.createResult(range, labels, control, self, false, rest)
|
: self.annotation.createResult(range, labels, control, self, false);
|
const root = self.getRootNode();
|
|
if (!ff.isActive(ff.FF_MULTIPLE_LABELS_REGIONS)) {
|
//when user is using two different labels tag to draw a region, the other labels will be added to the region
|
restSelectedStates.forEach((state) => {
|
area.setValue(state);
|
destroyNode(state);
|
});
|
}
|
|
area._range = range._range;
|
|
// @TODO: Maybe it could be solved by domManager
|
const [soff, eoff] = rangeToGlobalOffset(range._range, root);
|
|
area.updateGlobalOffsets(soff, eoff);
|
|
if (range.isText) {
|
area.updateTextOffsets(soff, eoff);
|
} else {
|
area.updateXPathsFromGlobalOffsets();
|
}
|
|
area.applyHighlight();
|
|
area.notifyDrawingFinished();
|
|
return area;
|
},
|
};
|
});
|
|
export const RichTextModel = types.compose(
|
"RichTextModel",
|
ProcessAttrsMixin,
|
ObjectBase,
|
RegionsMixin,
|
AnnotationMixin,
|
IsReadyMixin,
|
TagAttrs,
|
Model,
|
);
|
