feat: Annotated Text component #462

polymorpheuz · 2024-06-13T03:39:41Z

No description provided.

polymorpheuz · 2024-06-13T03:40:51Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+	pronoun: "Pronoun",
+};
+
+function getShortName(name: string) {


Not sure if we even need it. In our reference package they do things like that.

polymorpheuz · 2024-06-13T03:41:27Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+	}
+}
+
+function copyToClipboard({


I believe these two copy functions should travel someplace else but I have no understanding where to.

polymorpheuz · 2024-06-13T03:42:55Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+	{ h: 70, s: 0, l: 29 },
+];
+
+let currentSteps = [...COLOR_STEPS];


You might wonder why am I doing that. For the tags it's perfectly fine to have the same color for for different tags. Here it's critical to not repeat the colors. More below.

polymorpheuz · 2024-06-13T03:43:40Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+	const colorStep = calculateColorStep(s, currentSteps.length);
+	const colorData = currentSteps[colorStep];
+
+	subjectColorCache[s] = colorData;


So we make sure to cache the initial allocation here

polymorpheuz · 2024-06-13T03:44:13Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+	const colorData = currentSteps[colorStep];
+
+	subjectColorCache[s] = colorData;
+	currentSteps.splice(colorStep, 1);


..and we get rid of that color so the random pick won't set us up to have the same color for another subject

polymorpheuz · 2024-06-13T03:45:35Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+	}
+
+	// If we run out of colors, reset the list
+	if (currentSteps.length === 0) {


This is a safeguard in order to keep it operational even if we ran out of colors. We shouldn't allow that though and it's better to add like +10-20 color to what we have now.

ramedina86 · 2024-06-13T16:04:55Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+	return false;
+}
+
+const defaultShortNameDictionary = {


Let's remove this dict, people can enter the whole thing

ramedina86 · 2024-06-13T16:05:26Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+
+.annotation-subject {
+	display: inline-flex;
+	font-size: 0.6rem;


Let's use px instead of rem

I use rem for font-sizes, but looking to change to px too

ramedina86 · 2024-06-13T16:06:52Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+	return generateColorCss(baseColor, colorData);
+}
+
+function copyText(arr: string[]) {


Let's move copy functionality and the bar to base/ in a component called BaseControlBar.vue (or similar).

ramedina86 · 2024-06-13T16:07:26Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+let subjectColorCache = {};
+let lastSeed = fields.seed.value;
+
+function generateColorCss(


Feel free about moving to colorTransformers or similar (if you want).

@polymorpheuz We may choose to have a file for color transformations, since they're similar across tags and annotated text

ramedina86 · 2024-06-13T16:07:55Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+	{ h: -228, s: 0, l: 22 },
+	{ h: 69, s: 0, l: 25 },
+	{ h: 70, s: 0, l: 29 },
+];


Think about how to extend to support more colors, maybe consider discussing this with Miffy. Right now, I'm using the Tag colors as specified in the design system.

@ramedina86 I've asked Miffy a while ago on the additional colors and she pointed to the other color groups. The problem is that they don't match 😅 I was waiting for Pete being in the office to ambush him but he keeps avoiding me so far.

It seems like it's either we're going with 10 colors or an LLM is out best bet 🤣

ramedina86 · 2024-06-13T16:08:13Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+				name: "KeyValue",
+				type: FieldType.Object,
+				desc: "Value array with text/annotations. Must be a JSON string or a state reference to an array.",
+				default: `["This ",["is", "Verb"]," some ",["annotated", "Adjective"],    ["text", "Noun"]," for those of ",["you", "Pronoun"]," who ",["like", "Verb"]," this sort of ",["thing", "Noun"],". ","And here's a ",["word", "", "#faf"]," with a fancy background but no label."]`,


Let's go for init rather than default

ramedina86 · 2024-06-19T19:08:10Z

Forgot to mention, we use conventional commits

…trolBar component

ramedina86 · 2024-07-15T10:54:31Z

Hey @polymorpheuz can you add the component to templateMap.ts? So that it's linked (unsure how you're developing right now)

@FabienArcellier this is a very interesting component if you want to have a look

madeindjs · 2024-07-15T19:54:19Z

src/ui/src/core_components/base/BaseControlBar.vue

+const props = defineProps<{
+	copyRawContent?: string;
+	copyStructuredContent?: string;
+}>();


You should use object definition to have runtime checks

Suggested change

const props = defineProps<{

copyRawContent?: string;

copyStructuredContent?: string;

}>();

const props = defineProps({

copyRawContent: { type: String, required: false },

copyStructuredContent: { type: String, required: false },

});

Maybe it's a broader question on how we actually define props in the project. In this case, I was following how the other components defining props. My take is to stick to one approach until we decide to go with another.

Also, I'm not sure if there's practical use of runtime checks in this case. The bar is used by us as a building block, so it's not a blackbox for a general user to leave hints to.

@ramedina86 @FabienArcellier What do you think?

I think this is a good suggestion but in line with @polymorpheuz I'd like to decide on the standard and then @madeindjs can migrate all in one block :)

madeindjs · 2024-07-15T20:09:47Z

src/ui/src/core_components/base/BaseControlBar.vue

+		try {
+			return document.execCommand("copy"); // Security exception may be thrown by some browsers.
+		} catch (ex) {
+			return false;
+		} finally {
+			document.body.removeChild(textarea);
+			document.removeEventListener("copy", copyListener, false);
+		}


document.execCommand is deprecated API (MDN). You should use Clipboard API like this

await navigator.clipboard.writeText(text);

You can even use this solution with this polyfill to support old browsers

Thanks for pointing this out!

It's not deprecated in a traditional sense. The drama around it is long and could take 5 at least more years. I went with it since I don't see it being deprecated anytime soon and it just works for any browser. It just works for any content format, so the component is easily extensible.

However, it's a nice discussion point. I couldn't find a doc on what browsers do we actually support. If we are not hitting limitations with these constraints, I have no objections on using navigator.clipboard.

cc @ramedina86 @FabienArcellier

That was an interesting read. I think let's go for the Clipboard API i.e. navigator.clipboard. It seems that the spec has finally matured and execCommand is being kept mostly for compatibility with other non-clipboard-related actions.

I think for now we only need navigator.clipboard.writeText() which has excellent support, so we won't need the polyfill. Once we work on the Rich Text Editor this might change.

Something to take into account is that writeText() only seems to work in secure contexts.

Would like to have @FabienArcellier 's opinion here too.

madeindjs · 2024-07-15T20:19:27Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

@@ -0,0 +1,248 @@
+<template>
+	<div class="AnnotatedText">
+		<span v-for="(content, i) in fields.text.value" :key="content + i">


content can be a number and then you can have duplicated key. I suggest to cast it to be safe

Suggested change

<span v-for="(content, i) in fields.text.value" :key="content + i">

<span v-for="(content, i) in fields.text.value" :key="String(content) + i">

madeindjs · 2024-07-15T20:26:18Z

src/ui/src/core_components/content/CoreAnnotatedText.vue

+let currentSteps = [...COLOR_STEPS];
+let subjectColorCache = {};
+let lastSeed = fields.seed.value;


Are you sure you don't need to make them reactive ?

Suggested change

let currentSteps = [...COLOR_STEPS];

let subjectColorCache = {};

let lastSeed = fields.seed.value;

let currentSteps = ref([...COLOR_STEPS]);

let subjectColorCache = ref({});

let lastSeed = ref(fields.seed.value);

If its not refs, Vue.js can't track them and might not re-render on update (doc)

It doesn't seem that we need reactivity in this case. I am following CoreTags that seem to work in this case just as fine.

Yes, let's not use reactivity that we don't need.

ramedina86 · 2024-07-29T12:35:56Z

@polymorpheuz Have you looked into why CI isn't passing?

feat: Annotated Text component

374d3fc

polymorpheuz commented Jun 13, 2024

View reviewed changes

ramedina86 reviewed Jun 13, 2024

View reviewed changes

ramedina86 changed the title ~~Annotated Text component~~ feat: Annotated Text component Jun 19, 2024

Dmitry Mozolevsky added 5 commits July 7, 2024 19:36

fix: got rid of name shortener for the annotated text component

2d4ae72

fix: default to init value for annotated text component init value

29de0f2

feat: rem -> px in annotated text component

924a1f9

feat: moved copy buttons bar from AnnotatedText to a separate BaseCon…

671547a

…trolBar component

fix: linting fixes for AnnotatedText

249e9a0

madeindjs reviewed Jul 15, 2024

View reviewed changes

Dmitry Mozolevsky and others added 2 commits July 28, 2024 20:25

fix: addressing PR comments

4b8962f

Merge branch 'dev' into dev

5a3cb5d

Dmitry Mozolevsky added 2 commits July 29, 2024 22:33

feat: substituted execCommand with writeText

916015b

fix: imports for coreannotatedtext

79a4276

polymorpheuz force-pushed the dev branch from c4da607 to e406539 Compare August 2, 2024 06:59

fix: addressing prettier

ede0cf7

polymorpheuz force-pushed the dev branch from e406539 to ede0cf7 Compare August 2, 2024 07:01

Dmitry Mozolevsky and others added 4 commits August 4, 2024 20:43

feat: added preview picture

0bfddf9

chore: bump commit to make sure that the weird error persists

633b748

fix: e2e fix

7d19c42

feat: description image

4acd3d3

polymorpheuz force-pushed the dev branch from 2792476 to 4acd3d3 Compare August 12, 2024 16:56

feat: another guess for fixing e2e

0f4e1cb

ramedina86 changed the base branch from dev to feat-annotatedtext August 14, 2024 14:55

ramedina86 merged commit ede9c75 into writer:feat-annotatedtext Aug 14, 2024
12 of 16 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Annotated Text component #462

feat: Annotated Text component #462

polymorpheuz commented Jun 13, 2024

polymorpheuz Jun 13, 2024

polymorpheuz Jun 13, 2024

polymorpheuz Jun 13, 2024

polymorpheuz Jun 13, 2024

polymorpheuz Jun 13, 2024

polymorpheuz Jun 13, 2024

ramedina86 Jun 13, 2024

ramedina86 Jun 13, 2024

ramedina86 Jun 13, 2024

ramedina86 Jun 13, 2024

ramedina86 Jul 15, 2024

ramedina86 Jun 13, 2024

polymorpheuz Jul 29, 2024

ramedina86 Jun 13, 2024

ramedina86 commented Jun 19, 2024

ramedina86 commented Jul 15, 2024

madeindjs Jul 15, 2024

polymorpheuz Jul 29, 2024

ramedina86 Jul 30, 2024

madeindjs Jul 15, 2024

polymorpheuz Jul 29, 2024

ramedina86 Jul 29, 2024

madeindjs Jul 15, 2024

madeindjs Jul 15, 2024

polymorpheuz Jul 29, 2024 •

edited

Loading

ramedina86 Jul 30, 2024

ramedina86 commented Jul 29, 2024

	<span v-for="(content, i) in fields.text.value" :key="content + i">
	<span v-for="(content, i) in fields.text.value" :key="String(content) + i">

feat: Annotated Text component #462

feat: Annotated Text component #462

Conversation

polymorpheuz commented Jun 13, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ramedina86 commented Jun 19, 2024

ramedina86 commented Jul 15, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

polymorpheuz Jul 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ramedina86 commented Jul 29, 2024

polymorpheuz Jul 29, 2024 •

edited

Loading