@cocreate/cursors 1.23.5 → 1.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/demo/potential-selection-method.html +168 -0
- package/package.json +1 -1
- package/prettier.config.js +16 -0
- package/src/index.css +1 -1
- package/src/index.js +30 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
# [1.24.0](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.23.5...v1.24.0) (2024-11-04)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* frameELement handlning ([d6e22b2](https://github.com/CoCreate-app/CoCreate-cursors/commit/d6e22b2629f6cbbdee62d74737e1a167cecad371))
|
|
7
|
+
* mirror_id specificity ([af25adb](https://github.com/CoCreate-app/CoCreate-cursors/commit/af25adbe2399534c95dec3b22d0c9c135eeff945))
|
|
8
|
+
* observer taget has been renamed to selector ([69a331b](https://github.com/CoCreate-app/CoCreate-cursors/commit/69a331bde18eb94ff038e025cb3bf2a59a33dc8d))
|
|
9
|
+
* pretier.config.js and file formating ([0424309](https://github.com/CoCreate-app/CoCreate-cursors/commit/042430940a6fc0fd3bdaa758de39058f4cf4b7d3))
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* add prettier.config.js and format files ([592805d](https://github.com/CoCreate-app/CoCreate-cursors/commit/592805d42049e75c5ffa8a6ef74ef64960bd0be3))
|
|
15
|
+
|
|
1
16
|
## [1.23.5](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.23.4...v1.23.5) (2024-06-12)
|
|
2
17
|
|
|
3
18
|
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<style>
|
|
7
|
+
.highlight {
|
|
8
|
+
position: absolute;
|
|
9
|
+
background-color: yellow;
|
|
10
|
+
opacity: 0.2;
|
|
11
|
+
pointer-events: none;
|
|
12
|
+
z-index: 1000;
|
|
13
|
+
}
|
|
14
|
+
</style>
|
|
15
|
+
<title>Highlight Selected Text</title>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<div class="markdown-body padding:0_20px width:100%">
|
|
19
|
+
<h2>Introduction</h2>
|
|
20
|
+
<p>
|
|
21
|
+
Choosing a career is one of the most significant decisions we
|
|
22
|
+
face in our lives. It's not just about picking a job—it's about
|
|
23
|
+
finding a path that aligns with our passions, strengths, and
|
|
24
|
+
values. However, with so many options and paths available, the
|
|
25
|
+
process can be overwhelming. In this blog post, we'll delve into
|
|
26
|
+
strategies for finding your career path, from self-reflection to
|
|
27
|
+
taking concrete action.
|
|
28
|
+
</p>
|
|
29
|
+
<h2>Self-Reflection: Know Thyself</h2>
|
|
30
|
+
<h3>Assess Your Interests and Skills</h3>
|
|
31
|
+
<p>
|
|
32
|
+
Start by asking yourself what you enjoy doing. What are your
|
|
33
|
+
hobbies? What subjects do you find fascinating? Also, consider
|
|
34
|
+
your skills. Are there tasks you excel at or that come naturally
|
|
35
|
+
to you? Make a list of your interests and skills to guide your
|
|
36
|
+
career exploration.
|
|
37
|
+
</p>
|
|
38
|
+
<h3>Understand Your Values</h3>
|
|
39
|
+
<p>
|
|
40
|
+
Your values are the principles that matter most to you in life.
|
|
41
|
+
Do you value work-life balance, or is career progression your
|
|
42
|
+
top priority? Do you want to make a difference in the world, or
|
|
43
|
+
is financial security more important? Knowing what you value can
|
|
44
|
+
help you find careers that align with your principles.
|
|
45
|
+
</p>
|
|
46
|
+
<h3>Consider Your Personality</h3>
|
|
47
|
+
<p>
|
|
48
|
+
Personality can play a big role in job satisfaction. Are you an
|
|
49
|
+
extrovert who thrives in social environments, or are you more
|
|
50
|
+
introverted and prefer solitary work? Personality assessments,
|
|
51
|
+
like the Myers-Briggs Type Indicator or the Big Five, can
|
|
52
|
+
provide insights into careers that might suit you.
|
|
53
|
+
</p>
|
|
54
|
+
<h2>Exploration: Broaden Your Horizons</h2>
|
|
55
|
+
<h3>Research Potential Careers</h3>
|
|
56
|
+
<p>
|
|
57
|
+
Once you have a better understanding of your interests, skills,
|
|
58
|
+
and values, start researching careers that align with them. Look
|
|
59
|
+
into job descriptions, required qualifications, and potential
|
|
60
|
+
career paths. Informational interviews with professionals in the
|
|
61
|
+
field can also provide valuable insights.
|
|
62
|
+
</p>
|
|
63
|
+
<h3>Get Experience</h3>
|
|
64
|
+
<p>
|
|
65
|
+
Internships, part-time jobs, and volunteer opportunities are
|
|
66
|
+
excellent ways to gain experience and learn more about different
|
|
67
|
+
careers. These experiences can help you understand what you like
|
|
68
|
+
and don't like in a work environment.
|
|
69
|
+
</p>
|
|
70
|
+
<h3>Education and Training</h3>
|
|
71
|
+
<p>
|
|
72
|
+
Sometimes, the career you're interested in requires specific
|
|
73
|
+
education or training. Research the necessary qualifications and
|
|
74
|
+
consider whether you're willing to undertake the required
|
|
75
|
+
education or certification processes.
|
|
76
|
+
</p>
|
|
77
|
+
<h2>Evaluating Options: Making the Choice</h2>
|
|
78
|
+
<h3>Pros and Cons</h3>
|
|
79
|
+
<p>
|
|
80
|
+
For each career option you're considering, list the pros and
|
|
81
|
+
cons. This can help you visualize which career aligns best with
|
|
82
|
+
your interests, skills, and values.
|
|
83
|
+
</p>
|
|
84
|
+
<h3>Long-Term Outlook</h3>
|
|
85
|
+
<p>
|
|
86
|
+
Consider the long-term prospects of each career. Is the field
|
|
87
|
+
growing, or is it in decline? Will there be opportunities for
|
|
88
|
+
advancement? A career with a positive outlook can offer more
|
|
89
|
+
stability and growth potential.
|
|
90
|
+
</p>
|
|
91
|
+
<h3>Work Environment</h3>
|
|
92
|
+
<p>
|
|
93
|
+
Think about the type of work environment you thrive in. Do you
|
|
94
|
+
prefer a structured corporate setting, a creative agency, or
|
|
95
|
+
perhaps the flexibility of freelancing? Make sure your chosen
|
|
96
|
+
career can provide the environment you're looking for.
|
|
97
|
+
</p>
|
|
98
|
+
<h2>Taking Action: Moving Forward</h2>
|
|
99
|
+
<h3>Set Goals</h3>
|
|
100
|
+
<p>
|
|
101
|
+
Once you've decided on a career path, set short-term and
|
|
102
|
+
long-term goals. What steps do you need to take to enter your
|
|
103
|
+
chosen field? This could include further education, networking,
|
|
104
|
+
or gaining more experience.
|
|
105
|
+
</p>
|
|
106
|
+
<h3>Create a Plan</h3>
|
|
107
|
+
<p>
|
|
108
|
+
Develop a detailed plan of how you'll reach your goals. Break
|
|
109
|
+
down your plan into manageable steps, and set deadlines to keep
|
|
110
|
+
yourself accountable.
|
|
111
|
+
</p>
|
|
112
|
+
<h3>Stay Flexible</h3>
|
|
113
|
+
<p>
|
|
114
|
+
Remember that career paths can change. Stay open to new
|
|
115
|
+
opportunities, and don't be afraid to pivot if your interests or
|
|
116
|
+
circumstances change.
|
|
117
|
+
</p>
|
|
118
|
+
<h2>Conclusion</h2>
|
|
119
|
+
<p>
|
|
120
|
+
Choosing a career is a journey that requires introspection,
|
|
121
|
+
exploration, and a willingness to adapt. By understanding
|
|
122
|
+
yourself, researching options, evaluating potential paths, and
|
|
123
|
+
taking action, you can find a career that is fulfilling and
|
|
124
|
+
rewarding. Remember that it's okay to change directions, and the
|
|
125
|
+
most important thing is to find a path that feels right for you.
|
|
126
|
+
</p>
|
|
127
|
+
|
|
128
|
+
<input value="hello today good sir" />
|
|
129
|
+
</div>
|
|
130
|
+
<script>
|
|
131
|
+
document.addEventListener("selectionchange", () => {
|
|
132
|
+
// Remove existing highlights
|
|
133
|
+
document
|
|
134
|
+
.querySelectorAll(".highlight")
|
|
135
|
+
.forEach((el) => el.remove());
|
|
136
|
+
|
|
137
|
+
// Get the selection object
|
|
138
|
+
const selection = window.getSelection();
|
|
139
|
+
|
|
140
|
+
// Check if there's any text selected
|
|
141
|
+
if (!selection.isCollapsed) {
|
|
142
|
+
// Iterate over all ranges in the selection
|
|
143
|
+
for (let i = 0; i < selection.rangeCount; i++) {
|
|
144
|
+
const range = selection.getRangeAt(i);
|
|
145
|
+
const rects = range.getClientRects();
|
|
146
|
+
|
|
147
|
+
// Iterate over all rects in the current range
|
|
148
|
+
for (let rect of rects) {
|
|
149
|
+
const highlightSpan = document.createElement("div");
|
|
150
|
+
highlightSpan.className = "highlight";
|
|
151
|
+
|
|
152
|
+
highlightSpan.style.left = `${
|
|
153
|
+
rect.left + window.scrollX
|
|
154
|
+
}px`;
|
|
155
|
+
highlightSpan.style.top = `${
|
|
156
|
+
rect.top + window.scrollY
|
|
157
|
+
}px`;
|
|
158
|
+
highlightSpan.style.width = `${rect.width}px`;
|
|
159
|
+
highlightSpan.style.height = `${rect.height}px`;
|
|
160
|
+
|
|
161
|
+
document.body.appendChild(highlightSpan);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
</script>
|
|
167
|
+
</body>
|
|
168
|
+
</html>
|
package/package.json
CHANGED
package/src/index.css
CHANGED
package/src/index.js
CHANGED
|
@@ -104,16 +104,35 @@ function drawCursors(selection) {
|
|
|
104
104
|
if (cursors != 'true') continue;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
+
let domTextEditor = element;
|
|
108
|
+
|
|
107
109
|
if (element.hasAttribute('contenteditable')) {
|
|
108
110
|
contenteditable = true
|
|
109
111
|
// let domTextEditor = element;
|
|
110
112
|
if (element.tagName == 'IFRAME') {
|
|
111
113
|
// let frameClientId = element.contentDocument.defaultView.CoCreateSockets.id;
|
|
112
114
|
// if (frameClientId == selection.socketId) continue;
|
|
113
|
-
element = element.contentDocument.documentElement;
|
|
115
|
+
domTextEditor = element = element.contentDocument.documentElement;
|
|
116
|
+
|
|
117
|
+
let pos = getElementPosition(domTextEditor.htmlString, start, end);
|
|
118
|
+
|
|
119
|
+
if (pos.path) {
|
|
120
|
+
element = element.querySelector(pos.path);
|
|
121
|
+
if (pos.start) {
|
|
122
|
+
let endPos = end - start;
|
|
123
|
+
if (endPos > 0)
|
|
124
|
+
end = pos.start + endPos;
|
|
125
|
+
else
|
|
126
|
+
end = pos.start;
|
|
127
|
+
start = pos.start;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
114
131
|
}
|
|
115
|
-
|
|
132
|
+
|
|
133
|
+
if (!domTextEditor.htmlString)
|
|
116
134
|
continue
|
|
135
|
+
|
|
117
136
|
// let pos = getElementPosition(domTextEditor.htmlString, start, end);
|
|
118
137
|
|
|
119
138
|
// if (pos.path) {
|
|
@@ -142,7 +161,10 @@ function drawCursors(selection) {
|
|
|
142
161
|
mirrorDiv.className = (environment_prod) ? 'mirror mirror_scroll mirror_color' : 'mirror mirror_scroll';
|
|
143
162
|
mirrorDiv.contentEditable = false;
|
|
144
163
|
mirrorDiv.element = element;
|
|
145
|
-
element.
|
|
164
|
+
if (element.tagName === "HTML")
|
|
165
|
+
element.insertAdjacentElement('beforeend', mirrorDiv);
|
|
166
|
+
else
|
|
167
|
+
element.insertAdjacentElement('afterend', mirrorDiv);
|
|
146
168
|
// let parent = element.parentElement;
|
|
147
169
|
// let parentComputed = getComputedStyle(parent);
|
|
148
170
|
// let parentStylePosition = parentComputed['position'];
|
|
@@ -180,7 +202,7 @@ function drawCursors(selection) {
|
|
|
180
202
|
style.border = computed['border'];
|
|
181
203
|
style.outline = computed['outline'];
|
|
182
204
|
|
|
183
|
-
if (element.parentElement.style['display'] == 'inline') {
|
|
205
|
+
if (element.parentElement && element.parentElement.style['display'] == 'inline') {
|
|
184
206
|
style.top = element.clientTop + 'px';
|
|
185
207
|
style.left = element.clientLeft + 'px';
|
|
186
208
|
} else {
|
|
@@ -230,13 +252,14 @@ function drawCursors(selection) {
|
|
|
230
252
|
|
|
231
253
|
let selectionElement
|
|
232
254
|
if (contenteditable) {
|
|
233
|
-
selectionElement = getElementPosition(
|
|
255
|
+
selectionElement = getElementPosition(domTextEditor.htmlString, selection.start, selection.end);
|
|
234
256
|
}
|
|
235
257
|
|
|
236
258
|
let lastChildTagName, lastChildElement
|
|
237
259
|
if (selectionElement && selectionElement.element && selectionElement.position !== 'afterend') {
|
|
238
260
|
lastChildElement = selection_user.lastElementChild;
|
|
239
|
-
|
|
261
|
+
if (lastChildElement)
|
|
262
|
+
lastChildTagName = lastChildElement.tagName.toLowerCase()
|
|
240
263
|
}
|
|
241
264
|
|
|
242
265
|
let selectedText = document.createElement('selected-text');
|
|
@@ -461,7 +484,7 @@ socket.listen('cursor', function (response) {
|
|
|
461
484
|
observer.init({
|
|
462
485
|
name: 'CoCreateCursor',
|
|
463
486
|
observe: ['addedNodes'],
|
|
464
|
-
|
|
487
|
+
selector: '[array][object][key]',
|
|
465
488
|
callback: function (mutation) {
|
|
466
489
|
initElement(mutation.target);
|
|
467
490
|
}
|