I am an internist in Japan.
Several types of Japanese electronic medical records run on Chrome. I'm thinking of doing a seminar on Text Blaze electronic medical record entry assistance, but I can't use the website selector to select the input fields for some types of electronic medical records. This will reduce the effectiveness of Text Blaze by half. Is there any way to find out the cause?
Hi @N_Saito can you please share the Inspect HTML view for any one of those input fields?
You can share it here or email me at gaurang@blaze.today
Thanks again for all your replies.
The page is split and the source of the frame (input field) you want to select is below.
I cannot select this frame with the Text Blaze capable website selector.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>SOAP Editor</title>
<script>
function onBold() {
document.execCommand('Bold', false, null);
}
function onBlack() {
document.execCommand('ForeColor', false, 'black');
}
function onBlue() {
document.execCommand('ForeColor', false, 'blue');
}
function onRed() {
document.execCommand('ForeColor', false, 'red');
}
function onStrike() {
document.execCommand('strikeThrough', false, null);
}
function getPlainHtml(text) {
const res = text
.replace(/&/g, '&')
.replace(/<(.*?)>/g, '<$1>')
.replace(/\r\n?/g, '\n')
.replace(/\n{2}/g, '\n')
.split('\n')
.map(function(t) {
return isEmpty(t) ? `<p><br></p>` : `<p>${t}</p>`;
})
.join('');
return res;
}
function isEmpty(v) {
return v === null || v === undefined || v === '';
}
function moveEditorCursorToEnd() {
var editor = document.getElementById('editor');
const editorRange = document.createRange();
const editorSel = window.getSelection();
const getStartOffset = () => {
if (editor.childNodes.length === 0) {
return [editor, 0];
}
const p = editor.childNodes[editor.childNodes.length - 1];
const node = p.childNodes.length === 0 ? p : p.childNodes[p.childNodes.length - 1];
return [node, node.childNodes.length ? node.childNodes.length : node.length];
};
const res = getStartOffset();
editorRange.setStart(res[0], res[1]);
editorRange.collapse(true);
editorSel.removeAllRanges();
editorSel.addRange(editorRange);
}
document.execCommand('DefaultParagraphSeparator', false, 'p');
document.addEventListener('DOMContentLoaded', function(e) {
var editor = document.getElementById('editor');
editor.addEventListener('paste', function(e) {
e.preventDefault();
const items = e.clipboardData.items || [];
// kind=string, type=text/plain
for (const item of items) {
if (item.kind === 'string' && item.type.match('^text/plain')) {
item.getAsString(text => {
var html = getPlainHtml(text);
document.execCommand('insertHTML', false, html);
});
return;
}
}
// kind=file, type=image/*
for (const item of items) {
if (item.kind === 'file' && item.type.match('^image/')) {
const blob = item.getAsFile();
const fileReader = new FileReader();
fileReader.readAsDataURL(blob);
fileReader.onload = () => {
window.parent.postMessage({ message: 'MSG_IMAGE_PASTE_EDITOR', value: fileReader.result?.toString() ?? '' }, '*');
};
return;
}
}
});
editor.addEventListener('drop', function(e) {
e.preventDefault();
e.stopPropagation();
var text = e.dataTransfer.getData('text/plain');
var html = getPlainHtml(text);
var sel = window.getSelection();
if (sel && sel.rangeCount > 0) {
var range = sel.getRangeAt(0);
if (!range.collapsed && document.activeElement === editor) {
document.execCommand('delete', false, null);
}
}
if (sel) {
sel.removeAllRanges();
sel.addRange(document.caretRangeFromPoint(e.clientX, e.clientY));
}
document.execCommand('insertHTML', false, html);
editor.focus();
});
editor.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
e.preventDefault();
document.execCommand('insertHTML', false, '	');
}
});
editor.addEventListener('insertHTMLFromExternal', function(e) {
e.preventDefault();
document.execCommand('insertHTML', false, e.detail);
});
editor.addEventListener('appendHTMLFromExternal', function(e) {
e.preventDefault();
var editor = document.getElementById('editor');
if (!editor.innerHTML || editor.innerHTML === '<p><br></p>') {
editor.innerHTML = e.detail;
} else {
editor.innerHTML += e.detail;
}
});
editor.addEventListener('insertHTMLAfterNewLineFromExternal', function(e) {
e.preventDefault();
var editor = document.getElementById('editor');
if (editor.innerHTML && editor.innerHTML !== '<p><br></p>') {
document.execCommand('insertText', false, '\n');
}
document.execCommand('insertHTML', false, e.detail);
});
editor.addEventListener('mousedown', function(e) {
e.stopPropagation();
});
editor.addEventListener('dragover', function(e) {
e.stopPropagation();
});
editor.addEventListener('focusAndMoveCursorToEnd', function(e) {
e.preventDefault();
moveEditorCursorToEnd();
editor.focus();
});
var editorArea = document.getElementById('editor-area');
editorArea.addEventListener('mousedown', function(e) {
e.preventDefault();
moveEditorCursorToEnd();
editor.focus();
});
editorArea.addEventListener('dragover', function(e) {
var editor = document.getElementById('editor');
if (document.activeElement === editor) {
return;
}
e.preventDefault();
moveEditorCursorToEnd();
});
editorArea.addEventListener('drop', function(e) {
if (document.activeElement === editor) {
return;
}
e.preventDefault();
moveEditorCursorToEnd();
var text = e.dataTransfer.getData('text/plain');
var html = getPlainHtml(text);
document.execCommand('insertHTML', false, html);
editor.focus();
});
var onBoldElm = document.getElementById('onBold');
var onBlackElm = document.getElementById('onBlack');
var onBlueElm = document.getElementById('onBlue');
var onRedElm = document.getElementById('onRed');
var onStrikeElm = document.getElementById('onStrike');
onBoldElm.addEventListener('click', function(e) {
onBold();
});
onBlackElm.addEventListener('click', function(e) {
onBlack();
});
onBlueElm.addEventListener('click', function(e) {
onBlue();
});
onRedElm.addEventListener('click', function(e) {
onRed();
});
onStrikeElm.addEventListener('click', function(e) {
onStrike();
});
});
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-size: 15px;
color: #222222;
}
main {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
main .tools {
flex: 0 0 auto;
}
main .tools ul {
display: flex;
justify-content: flex-end;
align-items: center;
flex-basis: 35px;
margin-top: 4px;
margin-bottom: 16px;
padding: 0;
list-style-type: none;
}
main .tools ul li {
}
main .tools .button {
cursor: pointer;
background-color: transparent;
border: none;
margin-right: 5px;
outline: none;
padding: 0;
}
main .tools .button img {
height: 20px;
width: 20px;
}
main .wysiwyg-editor {
min-height: 1.5em;
}
main .wysiwyg-editor-area {
flex: 1 1 auto;
overflow-y: auto;
height: 100%;
cursor: text;
}
main .wysiwyg-editor-area .wysiwyg-editor {
display: block;
font-size: 15px;
font-family: 'Noto Sans JP', sans-serif;
overflow-y: auto;
margin: 0;
outline: none;
white-space: break-spaces;
word-break: break-all;
padding-right: 5px;
position: fixed;
max-height: calc(100% - 47px);
top: 47px;
right: 0;
left: 0;
}
main .wysiwyg-editor-area .wysiwyg-editor p {
margin: 0;
}
main .wysiwyg-editor-area .wysiwyg-editor:disabled {
opacity: 0.4;
}
img {
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<main>
<nav class="tools">
<ul>
<li>
<button class="button" type="button" id="onStrike">
<img
alt="Strike"
src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22a%22%20d%3D%22M3%20.5h14A2.5%202.5%200%200%201%2019.5%203v14a2.5%202.5%200%200%201-2.5%202.5H3A2.5%202.5%200%200%201%20.5%2017V3A2.5%202.5%200%200%201%203%20.5z%22%2F%3E%20%3Cpath%20id%3D%22c%22%20d%3D%22M3%200h14a3%203%200%200%201%203%203v14a3%203%200%200%201-3%203H3a3%203%200%200%201-3-3V3a3%203%200%200%201%203-3z%22%2F%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cg%3E%20%3Cmask%20id%3D%22b%22%20fill%3D%22%23fff%22%3E%20%3Cuse%20xlink%3Ahref%3D%22%23a%22%2F%3E%20%3C%2Fmask%3E%20%3Cpath%20fill%3D%22%23F6F6F6%22%20d%3D%22M3%200h14a3%203%200%200%201%203%203v14a3%203%200%200%201-3%203H3a3%203%200%200%201-3-3V3a3%203%200%200%201%203-3z%22%20mask%3D%22url(%23b)%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cmask%20id%3D%22d%22%20fill%3D%22%23fff%22%3E%20%3Cuse%20xlink%3Ahref%3D%22%23c%22%2F%3E%20%3C%2Fmask%3E%20%3Cpath%20stroke%3D%22%23BFBFBF%22%20stroke-width%3D%222%22%20d%3D%22M3%200h14a3%203%200%200%201%203%203v14a3%203%200%200%201-3%203H3a3%203%200%200%201-3-3V3a3%203%200%200%201%203-3z%22%20mask%3D%22url(%23d)%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20stroke%3D%22%234A4A4A%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M5.5%2010h9%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"
/>
</button>
</li>
<li>
<button class="button" type="button" id="onBold">
<img
alt="Bold"
src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22a%22%20d%3D%22M3%20.5h14A2.5%202.5%200%200%201%2019.5%203v14a2.5%202.5%200%200%201-2.5%202.5H3A2.5%202.5%200%200%201%20.5%2017V3A2.5%202.5%200%200%201%203%20.5z%22%2F%3E%20%3Cpath%20id%3D%22c%22%20d%3D%22M3%200h14a3%203%200%200%201%203%203v14a3%203%200%200%201-3%203H3a3%203%200%200%201-3-3V3a3%203%200%200%201%203-3z%22%2F%3E%20%3Cpath%20id%3D%22e%22%20d%3D%22M3.74%207.98H1.28c-.58%200-.87.01-1.28.03.07-.42.09-.71.09-1.35V1.23C.09.77.06.41.01%200c.42.02.58.02%201.26.02h2.36c1.55%200%202.42.7%202.42%201.95%200%20.61-.18%201.06-.56%201.41-.22.21-.4.3-.79.42.51.11.74.21%201.01.46.41.38.62.88.62%201.53%200%201.4-.93%202.19-2.59%202.19zm-2.33-4.7h2.08c.76%200%201.21-.41%201.21-1.09%200-.32-.1-.59-.26-.74-.22-.2-.56-.31-.96-.31H1.41v2.14zm0%201.11v2.46h2.15c.89%200%201.39-.44%201.39-1.25%200-.4-.1-.67-.32-.87-.25-.22-.63-.34-1.09-.34H1.41z%22%2F%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cg%3E%20%3Cmask%20id%3D%22b%22%20fill%3D%22%23fff%22%3E%20%3Cuse%20xlink%3Ahref%3D%22%23a%22%2F%3E%20%3C%2Fmask%3E%20%3Cpath%20fill%3D%22%23F6F6F6%22%20d%3D%22M3%200h14a3%203%200%200%201%203%203v14a3%203%200%200%201-3%203H3a3%203%200%200%201-3-3V3a3%203%200%200%201%203-3z%22%20mask%3D%22url(%23b)%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cmask%20id%3D%22d%22%20fill%3D%22%23fff%22%3E%20%3Cuse%20xlink%3Ahref%3D%22%23c%22%2F%3E%20%3C%2Fmask%3E%20%3Cpath%20stroke%3D%22%23BFBFBF%22%20stroke-width%3D%222%22%20d%3D%22M3%200h14a3%203%200%200%201%203%203v14a3%203%200%200%201-3%203H3a3%203%200%200%201-3-3V3a3%203%200%200%201%203-3z%22%20mask%3D%22url(%23d)%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(7%206)%22%3E%20%3Cmask%20id%3D%22f%22%20fill%3D%22%23fff%22%3E%20%3Cuse%20xlink%3Ahref%3D%22%23e%22%2F%3E%20%3C%2Fmask%3E%20%3Cpath%20fill%3D%22%234A4A4A%22%20d%3D%22M-5%2013.01h16.33V-5H-5z%22%20mask%3D%22url(%23f)%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"
/>
</button>
</li>
<li>
<button class="button" type="button" id="onBlack">
<img
alt="Black"
src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Crect%20width%3D%2219%22%20height%3D%2219%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill%3D%22%23F6F6F6%22%20stroke%3D%22%23BFBFBF%22%20rx%3D%223%22%2F%3E%20%3Ctext%20fill%3D%22%234A4A4A%22%20font-family%3D%22HiraKakuProN-W3%2C%20Hiragino%20Kaku%20Gothic%20ProN%22%20font-size%3D%228%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-.32%22%3E%20%3Ctspan%20x%3D%225%22%20y%3D%2212%22%3EA%3C%2Ftspan%3E%20%3Ctspan%20x%3D%2210.68%22%20y%3D%2212%22%20letter-spacing%3D%22-.256%22%3Ea%3C%2Ftspan%3E%20%3C%2Ftext%3E%20%3Cpath%20fill%3D%22%234A4A4A%22%20d%3D%22M4%2013h12v2H4z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"
/>
</button>
</li>
<li>
<button class="button" type="button" id="onBlue">
<img
alt="Blue"
src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Crect%20width%3D%2219%22%20height%3D%2219%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill%3D%22%23F6F6F6%22%20stroke%3D%22%23BFBFBF%22%20rx%3D%223%22%2F%3E%20%3Ctext%20fill%3D%22%233B86FF%22%20font-family%3D%22HiraKakuProN-W3%2C%20Hiragino%20Kaku%20Gothic%20ProN%22%20font-size%3D%228%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-.32%22%3E%20%3Ctspan%20x%3D%225%22%20y%3D%2212%22%3EA%3C%2Ftspan%3E%20%3Ctspan%20x%3D%2210.68%22%20y%3D%2212%22%20letter-spacing%3D%22-.256%22%3Ea%3C%2Ftspan%3E%20%3C%2Ftext%3E%20%3Cpath%20fill%3D%22%233B86FF%22%20d%3D%22M4%2013h12v2H4z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"
/>
</button>
</li>
<li>
<button class="button" type="button" id="onRed">
<img
alt="Red"
src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Crect%20width%3D%2219%22%20height%3D%2219%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill%3D%22%23F6F6F6%22%20stroke%3D%22%23BFBFBF%22%20rx%3D%223%22%2F%3E%20%3Ctext%20fill%3D%22%23FF3B48%22%20font-family%3D%22HiraKakuProN-W3%2C%20Hiragino%20Kaku%20Gothic%20ProN%22%20font-size%3D%228%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-.32%22%3E%20%3Ctspan%20x%3D%225%22%20y%3D%2212%22%3EA%3C%2Ftspan%3E%20%3Ctspan%20x%3D%2210.68%22%20y%3D%2212%22%20letter-spacing%3D%22-.256%22%3Ea%3C%2Ftspan%3E%20%3C%2Ftext%3E%20%3Cpath%20fill%3D%22%23FF3B48%22%20d%3D%22M4%2013h12v2H4z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"
/>
</button>
</li>
</ul>
</nav>
<div id="editor-area" class="wysiwyg-editor-area">
<pre data-testid="soap-editor-content" id="editor" class="wysiwyg-editor" contenteditable="true" spellcheck="false"></pre>
</div>
</main>
</body>
</html>
Which information from this iframe are you trying to select?
@Gaurang_Tandon
I used the Website selector but could not select the input field.
Should I try to enter the information manually?
You can try a selector like this:
(firstpart) |> [data-testid="soap-editor-content"]
where the value of (firstpart) depends on the parent HTML of the frame. Can you share a screenshot of the Chrome DevTools window when you Inspect on the <iframe> itself?
@Gaurang_Tandon
Sorry, I'm not sure what an
@Gaurang_Tandon
I uploaded a screenshot from myself but it doesn't show up, can you see it?
It does not work for me either 
Can you email me at gaurang@blaze.today and we can try to figure something out?