AutoSuggest: Better way to implement focus after inserting a snippetUsing a popup to display messages to the userAttaching both mouseenter and mouseleave event handlers using jQueryUpdating Grid on Webpage (new version)When “How To Ask” is too subtleForm that reveals more fields as each step has been completedJS micro-view libraryJavacript code to flatten JSON via recursion with conditional logicCreate a dynamic growing pyramidPropagating table cell border colors to adjoining cellsHTML/Javascript Hex to RGB and RGB to Hex Color Converter
Why is Arduino resetting while driving motors?
How do you respond to a colleague from another team when they're wrongly expecting that you'll help them?
Flux received by a negative charge
Do the concepts of IP address and network interface not belong to the same layer?
Has Darkwing Duck ever met Scrooge McDuck?
Divine apple island
How will losing mobility of one hand affect my career as a programmer?
Global amount of publications over time
Is camera lens focus an exact point or a range?
Is it possible to use .desktop files to open local pdf files on specific pages with a browser?
MAXDOP Settings for SQL Server 2014
Open a doc from terminal, but not by its name
Is it improper etiquette to ask your opponent what his/her rating is before the game?
Can I use my Chinese passport to enter China after I acquired another citizenship?
Varistor? Purpose and principle
Do Legal Documents Require Signing In Standard Pen Colors?
Why does Async/Await work properly when the loop is inside the async function and not the other way around?
Is possible to search in vim history?
Visiting the UK as unmarried couple
Proof of Lemma: Every nonzero integer can be written as a product of primes
Why did the EU agree to delay the Brexit deadline?
What does the Rambam mean when he says that the planets have souls?
Would it be legal for a US State to ban exports of a natural resource?
Proving a function is onto where f(x)=|x|.
AutoSuggest: Better way to implement focus after inserting a snippet
Using a popup to display messages to the userAttaching both mouseenter and mouseleave event handlers using jQueryUpdating Grid on Webpage (new version)When “How To Ask” is too subtleForm that reveals more fields as each step has been completedJS micro-view libraryJavacript code to flatten JSON via recursion with conditional logicCreate a dynamic growing pyramidPropagating table cell border colors to adjoining cellsHTML/Javascript Hex to RGB and RGB to Hex Color Converter
$begingroup$
Introduction:
I am working on a javascript plugin AutoSuggest, My aim is to create an IDE like autocomplete experience in web applications using JavaScript.
One of the features I have implemented is focusing a particular portion of inserted snippet after insertion. This is how I am asking input for focus.
focusText:
[StartIndex, EndIndex]
StartIndex
andEndIndex
of the content that should be in focus
after inserting the text. As of now these indexes should be calculated
as (0 - numberOfCharactersFromEnd)
focusHtml:
[StartIndex, EndIndex]
StartIndex
andEndIndex
of the content that should be in focus after inserting the HTML. As of now these indexes should be calculated as (0 - numberOfCharactersFromEnd). This should not include the characters from HTML tags
Example:
value: 'script',
insertText: '<script type="text/javascript" src="path/to/jsfile"></script>',
focusText: [-25, -11],
insertHtml: `<<span style="color: red">script</span> <span style="color:green">type</span>=<span style="color:darksalmon">"text/javascript"</span> <span style="color:green">src</span>=<span style="color:darksalmon">"path/to/jsfile"</span>></<span style="color: red">script</span>>`,
focusHtml: [-25, -11],
// Should focus `path/to/jsfile` after inserting the snippet
insertText
and focusText
are for inserting snippet as text.
insertHtml
and focusHtml
are for inserting snippet as html elements.
And I am evaluating the focus value as follows:
/* For inserting as text:
* textNode is the text node in which the snippet has been inserted
* selection is the range object of current selection.
* cursorPosition is after the last character in inserted snippet
* */
selection.setStart(textNode, cursorPosition + focusText[0]);
selection.setEnd(textNode, cursorPosition + focusText[1]);
/* For inserting as HTML:
* textNode is the text node after which the new html element(s) will be inserted
* selection is the range object of current selection.
* insertHtmlAfter returns an Array of newly inserted nodes
* */
const nodes = insertHtmlAfter(textNode, suggestion.insertHtml);
const focus = nodes.length ? suggestion.focusHtml : [0, 0];
function setSelection(focus, nodes, method)
let lastNode, lastFocus = focus;
if (lastFocus !== 0)
do
lastNode = nodes.pop();
lastFocus += lastNode.textContent.length;
while(nodes.length && lastFocus < 0);
if (!lastNode)
throw new TypeError(`AutoSuggest: Invalid value provided for Suggestion.focusHtml`);
;
if (lastFocus === 0) startContainer);
else
if (lastNode.nodeType === lastNode.TEXT_NODE)
selection[method](lastNode, lastFocus);
else
setSelection(
lastFocus - lastNode.textContent.length,
Array.from(lastNode.childNodes),
method
);
;
setSelection(focus[1], [...nodes], 'setEnd');
setSelection(focus[0], [...nodes], 'setStart');
Problem:
Asking for focus values as negative numbers might be confusing for the users, but it simplifies the logic for
focusText
, so is there any better way that is both user friendly and requires simpler logic.I think the logic for setting the focus for inserting as HTML is a bit over-complicated, is there any better way to achieve this?
javascript dom text-editor
New contributor
$endgroup$
add a comment |
$begingroup$
Introduction:
I am working on a javascript plugin AutoSuggest, My aim is to create an IDE like autocomplete experience in web applications using JavaScript.
One of the features I have implemented is focusing a particular portion of inserted snippet after insertion. This is how I am asking input for focus.
focusText:
[StartIndex, EndIndex]
StartIndex
andEndIndex
of the content that should be in focus
after inserting the text. As of now these indexes should be calculated
as (0 - numberOfCharactersFromEnd)
focusHtml:
[StartIndex, EndIndex]
StartIndex
andEndIndex
of the content that should be in focus after inserting the HTML. As of now these indexes should be calculated as (0 - numberOfCharactersFromEnd). This should not include the characters from HTML tags
Example:
value: 'script',
insertText: '<script type="text/javascript" src="path/to/jsfile"></script>',
focusText: [-25, -11],
insertHtml: `<<span style="color: red">script</span> <span style="color:green">type</span>=<span style="color:darksalmon">"text/javascript"</span> <span style="color:green">src</span>=<span style="color:darksalmon">"path/to/jsfile"</span>></<span style="color: red">script</span>>`,
focusHtml: [-25, -11],
// Should focus `path/to/jsfile` after inserting the snippet
insertText
and focusText
are for inserting snippet as text.
insertHtml
and focusHtml
are for inserting snippet as html elements.
And I am evaluating the focus value as follows:
/* For inserting as text:
* textNode is the text node in which the snippet has been inserted
* selection is the range object of current selection.
* cursorPosition is after the last character in inserted snippet
* */
selection.setStart(textNode, cursorPosition + focusText[0]);
selection.setEnd(textNode, cursorPosition + focusText[1]);
/* For inserting as HTML:
* textNode is the text node after which the new html element(s) will be inserted
* selection is the range object of current selection.
* insertHtmlAfter returns an Array of newly inserted nodes
* */
const nodes = insertHtmlAfter(textNode, suggestion.insertHtml);
const focus = nodes.length ? suggestion.focusHtml : [0, 0];
function setSelection(focus, nodes, method)
let lastNode, lastFocus = focus;
if (lastFocus !== 0)
do
lastNode = nodes.pop();
lastFocus += lastNode.textContent.length;
while(nodes.length && lastFocus < 0);
if (!lastNode)
throw new TypeError(`AutoSuggest: Invalid value provided for Suggestion.focusHtml`);
;
if (lastFocus === 0) startContainer);
else
if (lastNode.nodeType === lastNode.TEXT_NODE)
selection[method](lastNode, lastFocus);
else
setSelection(
lastFocus - lastNode.textContent.length,
Array.from(lastNode.childNodes),
method
);
;
setSelection(focus[1], [...nodes], 'setEnd');
setSelection(focus[0], [...nodes], 'setStart');
Problem:
Asking for focus values as negative numbers might be confusing for the users, but it simplifies the logic for
focusText
, so is there any better way that is both user friendly and requires simpler logic.I think the logic for setting the focus for inserting as HTML is a bit over-complicated, is there any better way to achieve this?
javascript dom text-editor
New contributor
$endgroup$
add a comment |
$begingroup$
Introduction:
I am working on a javascript plugin AutoSuggest, My aim is to create an IDE like autocomplete experience in web applications using JavaScript.
One of the features I have implemented is focusing a particular portion of inserted snippet after insertion. This is how I am asking input for focus.
focusText:
[StartIndex, EndIndex]
StartIndex
andEndIndex
of the content that should be in focus
after inserting the text. As of now these indexes should be calculated
as (0 - numberOfCharactersFromEnd)
focusHtml:
[StartIndex, EndIndex]
StartIndex
andEndIndex
of the content that should be in focus after inserting the HTML. As of now these indexes should be calculated as (0 - numberOfCharactersFromEnd). This should not include the characters from HTML tags
Example:
value: 'script',
insertText: '<script type="text/javascript" src="path/to/jsfile"></script>',
focusText: [-25, -11],
insertHtml: `<<span style="color: red">script</span> <span style="color:green">type</span>=<span style="color:darksalmon">"text/javascript"</span> <span style="color:green">src</span>=<span style="color:darksalmon">"path/to/jsfile"</span>></<span style="color: red">script</span>>`,
focusHtml: [-25, -11],
// Should focus `path/to/jsfile` after inserting the snippet
insertText
and focusText
are for inserting snippet as text.
insertHtml
and focusHtml
are for inserting snippet as html elements.
And I am evaluating the focus value as follows:
/* For inserting as text:
* textNode is the text node in which the snippet has been inserted
* selection is the range object of current selection.
* cursorPosition is after the last character in inserted snippet
* */
selection.setStart(textNode, cursorPosition + focusText[0]);
selection.setEnd(textNode, cursorPosition + focusText[1]);
/* For inserting as HTML:
* textNode is the text node after which the new html element(s) will be inserted
* selection is the range object of current selection.
* insertHtmlAfter returns an Array of newly inserted nodes
* */
const nodes = insertHtmlAfter(textNode, suggestion.insertHtml);
const focus = nodes.length ? suggestion.focusHtml : [0, 0];
function setSelection(focus, nodes, method)
let lastNode, lastFocus = focus;
if (lastFocus !== 0)
do
lastNode = nodes.pop();
lastFocus += lastNode.textContent.length;
while(nodes.length && lastFocus < 0);
if (!lastNode)
throw new TypeError(`AutoSuggest: Invalid value provided for Suggestion.focusHtml`);
;
if (lastFocus === 0) startContainer);
else
if (lastNode.nodeType === lastNode.TEXT_NODE)
selection[method](lastNode, lastFocus);
else
setSelection(
lastFocus - lastNode.textContent.length,
Array.from(lastNode.childNodes),
method
);
;
setSelection(focus[1], [...nodes], 'setEnd');
setSelection(focus[0], [...nodes], 'setStart');
Problem:
Asking for focus values as negative numbers might be confusing for the users, but it simplifies the logic for
focusText
, so is there any better way that is both user friendly and requires simpler logic.I think the logic for setting the focus for inserting as HTML is a bit over-complicated, is there any better way to achieve this?
javascript dom text-editor
New contributor
$endgroup$
Introduction:
I am working on a javascript plugin AutoSuggest, My aim is to create an IDE like autocomplete experience in web applications using JavaScript.
One of the features I have implemented is focusing a particular portion of inserted snippet after insertion. This is how I am asking input for focus.
focusText:
[StartIndex, EndIndex]
StartIndex
andEndIndex
of the content that should be in focus
after inserting the text. As of now these indexes should be calculated
as (0 - numberOfCharactersFromEnd)
focusHtml:
[StartIndex, EndIndex]
StartIndex
andEndIndex
of the content that should be in focus after inserting the HTML. As of now these indexes should be calculated as (0 - numberOfCharactersFromEnd). This should not include the characters from HTML tags
Example:
value: 'script',
insertText: '<script type="text/javascript" src="path/to/jsfile"></script>',
focusText: [-25, -11],
insertHtml: `<<span style="color: red">script</span> <span style="color:green">type</span>=<span style="color:darksalmon">"text/javascript"</span> <span style="color:green">src</span>=<span style="color:darksalmon">"path/to/jsfile"</span>></<span style="color: red">script</span>>`,
focusHtml: [-25, -11],
// Should focus `path/to/jsfile` after inserting the snippet
insertText
and focusText
are for inserting snippet as text.
insertHtml
and focusHtml
are for inserting snippet as html elements.
And I am evaluating the focus value as follows:
/* For inserting as text:
* textNode is the text node in which the snippet has been inserted
* selection is the range object of current selection.
* cursorPosition is after the last character in inserted snippet
* */
selection.setStart(textNode, cursorPosition + focusText[0]);
selection.setEnd(textNode, cursorPosition + focusText[1]);
/* For inserting as HTML:
* textNode is the text node after which the new html element(s) will be inserted
* selection is the range object of current selection.
* insertHtmlAfter returns an Array of newly inserted nodes
* */
const nodes = insertHtmlAfter(textNode, suggestion.insertHtml);
const focus = nodes.length ? suggestion.focusHtml : [0, 0];
function setSelection(focus, nodes, method)
let lastNode, lastFocus = focus;
if (lastFocus !== 0)
do
lastNode = nodes.pop();
lastFocus += lastNode.textContent.length;
while(nodes.length && lastFocus < 0);
if (!lastNode)
throw new TypeError(`AutoSuggest: Invalid value provided for Suggestion.focusHtml`);
;
if (lastFocus === 0) startContainer);
else
if (lastNode.nodeType === lastNode.TEXT_NODE)
selection[method](lastNode, lastFocus);
else
setSelection(
lastFocus - lastNode.textContent.length,
Array.from(lastNode.childNodes),
method
);
;
setSelection(focus[1], [...nodes], 'setEnd');
setSelection(focus[0], [...nodes], 'setStart');
Problem:
Asking for focus values as negative numbers might be confusing for the users, but it simplifies the logic for
focusText
, so is there any better way that is both user friendly and requires simpler logic.I think the logic for setting the focus for inserting as HTML is a bit over-complicated, is there any better way to achieve this?
javascript dom text-editor
javascript dom text-editor
New contributor
New contributor
New contributor
asked 2 mins ago
AvcSAvcS
1011
1011
New contributor
New contributor
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "196"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
AvcS is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f216138%2fautosuggest-better-way-to-implement-focus-after-inserting-a-snippet%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
AvcS is a new contributor. Be nice, and check out our Code of Conduct.
AvcS is a new contributor. Be nice, and check out our Code of Conduct.
AvcS is a new contributor. Be nice, and check out our Code of Conduct.
AvcS is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f216138%2fautosuggest-better-way-to-implement-focus-after-inserting-a-snippet%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown