We Keep Coding

tiptap - Insert node below / at the end of the current one

I'm trying to create a text editor with tiptap using reactjs. I would like to create a button next to each "block" of the editor (paragraph block, blockquote block, codeblock block, ...) that allows the user to add a new empty block just before the selected block. It would look like this (Notion editor) :
So the way I tried to do this is to set the cursor's position at the end of the current node :
src/components/blocks/Paragraph.js
const Paragraph = (props) => {
// ...
return {
// ...
<button onMouseDown={() => {
// ...
// props.getPos() gives the position at the beginning of the block
// props.node.nodeSize gives the "length" of the node
const endPos = props.getPos() + props.node.nodeSize;
props.editor.commands.focus(endPos);
// ...
}}>
Add block below
</button>
}
}
So at this point, it works. But then, when I try to insert a new node at this position...
// It will insert a paragraph node containing text "New block added"
props.editor.commands.insertContent({
"type":"paragraph",
"content":[
{
"type":"text",
"text":"New block added"
}
]
})
... I get an error : TypeError: Cannot read property 'nodeType' of null
So, to let you see this error in details, I've made a sandbox on codesandbox.io. To reproduce the error, you just have to focus on the editor, write something random and then click on + button. You should see the error.
Thanks in advance for your help !

Current solution
Currently the best solution I've found :
const endPos = props.getPos() + props.node.nodeSize
// I focus the start of the editor because
// when the cursor is at the end of the node below which
// we want to add a block, it doesn't focus the next block
props.editor.commands.focus('start')
props.editor
.chain()
.insertContentAt(endPos, {type: "paragraph"})
.focus(endPos)
.run()

How to revert styles on second click?

This is my script:
function panelShow(index, code) {
buttons.forEach(function(button){
button.style.borderBottom="";
});
tabButtons[index].style.borderBottom="none";
panels.forEach(function(panel){
panel.style.display="none";
});
panels[index].style.display="block";
panels[index].style.backgroundColor=code;
}
The panelShow() takes parameters like index and code (code of the color). For example panelShow(1, #0000);
If there is a second click I want to revert styles and make panels[index].style.display="none";
How to do so? Please VanillaJS only.
Thanks.

try (answer is for this version of question)
let panels = [...document.querySelectorAll('.panel')];
panels.map(e=> e.ondblclick = e=> e.target.style.display="none" );
function panelShow(index, code) {
// ...your code
panels[index].style.display="block";
panels[index].style.backgroundColor=code;
}
panelShow(0,"#ff0000");
<div class="panel">panel 1 contetn</div>
<div class="panel">panel 2 contetn</div>

Cannot locate element using recursion after it found it as visible

My Problem:
I am trying to click options in a dropdown with Nightwatch, using sections in page objects. I'm not sure if it's a problem with the section declaration or i'm missing something scope-related. Problem is that it finds the element as visible, but when it tries to click it will throw error that it cannot locate it using recursion.
What could i try to do to fix this issue using sections?
In the test:
var myPage = browser.page.searchPageObject();
var mySection = searchPage.section.setResults;
// [finding and clicking the dropdown so it opens and displays the options]
browser.pause (3000);
browser.expect.section('#setResults').to.be.visible.before(1000);
myPage.myFunction(mySection, '18');
In the page object:
var searchKeywordCommands = {
myFunction: function (section, x) {
section.expect.element('#set18').to.be.visible.before(2000);
if (x == '18') section.click('#set18');
//[...]
};
module.exports = {
//[.. other elements and commands..]
sections: {
setResults: {
selector: '.select-theme-result', //have also tried with '.select-content' and '.select-options' but with the same result
elements: {
set18: '.select-option[data-value="18"]',
set36: '.select-option[data-value="36"]' //etc
}}}}
Here is my source code:
When i run this piece of core, it seems to find the section, finds the element visible (i also can clearly see that it opens the dropdown and shows the options) but when trying to click any option, i get the error: ERROR: Unable to locate element: Section[name=setResults], Element[name=#set18]" using: recursion
Here is the full error:
My attempts:
I have tried to declare that set18 selector as an individual element instead of inside of the section and everything works fine this way, but won't work inside of the section. I have also tried all the selectors available to define the section's selector, but it won't work with any of them.

This is what i am doing with(LOL)
I assume steps would be (find dropbox - click dropbox - select value).
var getValueElement = {
getValueSelector: function (x) {
return 'li[data-value="'+ x + '"]';
}
};
module.exports = {
//[.. other elements and commands..]
sections: {
setResults: {
commands:[getValueElement],
selector: 'div[class*="select-theme-result"', //* mean contains,sometime class is too long and unique,also because i am lazy.
elements: {
setHighlight:'li[class*="select-option-highlight"]',
setSelected:'li[class*="select-option-selected"]',
//set18: 'li[data-value="18"]',
//set36: 'li[data-value="36"]'
// i think getValueFunction is better,what if you have 100+ of set.
}}}}
In your test
var myPage = browser.page.searchPageObject();
var mySection = searchPage.section.setResults;
// [finding and clicking the dropdown so it opens and displays the options]
mySection
.click('#dropboxSelector')
.waitForElementVisible('#setHighlight',5000,false,
function(){
var set18 = mySection.getValueElement(18);
mySection.click(set18);
});
Ps:in my case(i think your case also), dropbox or any small third-party js framework which is used many times in your web app, so better create a different PageObject for it,make pageObject/section is simple as possible.

saving website styles in cookies

everyone. I'm using a cookie to save my website color style. The user can change color in real time and it will saved into his cookies. Before his choice I set default css color style like this (my.css)
.color-changing{
background-color: #43A047;
}
when you working you can choose the color with jquery,
var panel_theme = $(".color-changing");
if ($.cookie('background-color')) {
panel_theme.css("background-color", $.cookie('background-color'));
}
$("#greenColor").click(function () {
panel_theme.css('background-color', '#43A047');
$.removeCookie('background-color');
$.cookie('background-color', '#43A047', {expires: 1, path: '/'});
});
$("#redColor").click(function () {
panel_theme.css('background-color', '#d32f2f');
$.removeCookie('background-color');
$.cookie('background-color', '#d32f2f', {expires: 1, path: '/'});
});
The problem is that when you choose the color which is different from default color, with every page reload you will see the very fast flicker from default color to choosen. How I can avoid this?

My suggestion would be first to use localStorage instead of cookie. Saves cookie payload that gets sent for each and every request made to server.
Then save the actual css declaration as a style tag so you can write it in the head before the html has even finished loading. This will prevent any flicker as the style will already exist as html is rendered
Something like this before closing <head>:
<script>
var theme_style = localStorage && localStorage.getItem('theme_style');
if(theme_style){
document.write(theme_style);
}
</script>
Then to set style:
function updateUserStyle(color){
// create style tag
var style = '<style id="user_style">.color-changing{background-color: '+color + ';}</style>';
// see if user style tag already exists and replace
var $currUserStyle =$('#user_style');
if($currUserStyle.length){
$currUserStyle.replaceWith(style);
}else{
// if didn't exist add to head
$('head').append(style);
}
// store active style
localStorage.setItem('theme_style', style);
}
Usage
$("#redColor").click(function () {
updateUserStyle('#d32f2f');
});

How to hide some issue link types in the Issue Link pop up window for Jira 5.1.8 using javascript?

I wanted to hide some issue link outward & inwards strings of Link type from the Link Issues Popup Window using java script.
I have tried using java script but I am not getting the popup screen from the java script.
Please see the screenshot below :
Can anyone tell me how can I get this popup screen in the java script?
Is there any other method to hide this?
Thanks & Regards,
Renuka.

To hide the clone issue link every page:
edit the file system-webresources-plugin.xml (should be at /atlassian-jira/WEB-INF/classes/), and add to <web-resource key="jira-fields"> this code:
<resource type="download" name="myScript.js" location="/includes/jira/field/script.js">
<param name="source" value="webContextStatic"/>
</resource>
than, on /includes/jira/field/myScript.js write this:
AJS.$(document).ready(function() {
if (AJS.$("#link-type option[value*='clon']").size() > 0) {
// will work even when right clicking on More
// Actions->Link & open it into a new window
AJS.$("#link-type option[value*='clon']").remove()
} else if (AJS.$("#link-issue").size() > 0) {
// will work in case the link menu showing via popup
AJS.$("#link-issue").click(function(){
// wait for the popup to show, and remove the clone options
setTimeout(function (){
AJS.$("#link-type option[value*='clon']").remove();
}, 300);
});
}
});
restart Jira and it that it!
The script attaches a function to the link-menu opening, than gives the menu 0.3 seconds to load, and removes the unwanted items. If it doesn't work well for you, try to raise the timeout from 300 to 500-1000.
On jira 4, run instead:
AJS.$("#issue-link-link-type option[value*='clon']").remove();

The previous solution has an issue:
It will only work when clicking the "Link Issue"-Menu-Item.
When I use the Point (.)-Shortcut-Menu, it won't remove the issue types.
I have established the following solution:
JS-Binding-Part:
AJS.$(document).ready(function() {
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function(e, context, reason) {
hideIssueLinkTypes();
});
});
JS-Backing-Function:
function hideIssueLinkTypes() {
var apiURL = "/rest/scriptrunner/latest/custom/getHiddenLinkTypes"
$.getJSON( apiURL, {
}).done(function( objectData ) {
$.each( objectData, function( i, item ) {
var issueLinkType = item.issueLinkType[0];
AJS.$("#link-type option[value='"+issueLinkType.inwardDescription+"']").remove();
AJS.$("#link-type option[value='"+issueLinkType.outwardDescription+"']").remove();
});
});
}
Scriptrunner-REST-Endpoint:
import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
import groovy.json.JsonBuilder
import groovy.transform.BaseScript
import com.atlassian.jira.issue.link.DefaultIssueLinkTypeManager
import com.atlassian.jira.issue.link.IssueLinkTypeManager
import com.atlassian.jira.issue.link.IssueLinkType
import com.atlassian.jira.component.ComponentAccessor
import com.atlassian.jira.config.properties.ApplicationProperties
import javax.ws.rs.core.MultivaluedMap
import javax.ws.rs.core.Response
#BaseScript CustomEndpointDelegate delegate
String HIDDEN_IDENT="[hidden]"
getHiddenLinkTypes(httpMethod: "GET") { MultivaluedMap queryParams, String body ->
def appProperties = ((ApplicationProperties) ComponentAccessor.getComponentOfType(ApplicationProperties.class));
def appClonersLinkTypeName = appProperties.getDefaultBackedText("jira.clone.linktype.name");
def jsBuilder=new JsonBuilder();
def issueLinkTypes = ((IssueLinkTypeManager) ComponentAccessor.getComponentOfType(IssueLinkTypeManager.class)).getIssueLinkTypes();
jsBuilder issueLinkTypes.findAll({it.getName().contains(HIDDEN_IDENT) || it.getName()==appClonersLinkTypeName }),
{ IssueLinkType linkType ->
issueLinkType linkType.getId(),
name: linkType.getName(),
inwardDescription: linkType.getInward(),
outwardDescription: linkType.getOutward()
}
return Response.ok(jsBuilder.toString()).build();
}
What you can do then ist just annotate and Link-Type with putting [hidden] in the link name and it will disappear for all users (It can still be programmatically added though or created by cloning).
If you don't have Scriptrunner or don't need the dynamic nature of the implementation, you can still hard-code the values as Kuf described in the answer above in hideIssueTypes() like this:
AJS.$("#issue-link-link-type option[value*='clon']").remove();