![]() ResizeGadget(Editor_0, 10, FormWindowHeight - 80, FormWindowWidth - 20, 70) ResizeGadget(Canvas_0, 10, 10, FormWindowWidth - 20, FormWindowHeight - 120) Protected FormWindowWidth, FormWindowHeightįormWindowHeight = WindowHeight(Window_0) Window_0 = OpenWindow(#PB_Any, X, Y, Width, Height, "MyEditor Gadget", #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget | #PB_Window_SizeGadget)Ĭanvas_0 = CanvasGadget(#PB_Any, 10, 10, 670, 350, #PB_Canvas_Keyboard)Įditor_0 = EditorGadget(#PB_Any, 10, 390, 670, 70)īutton_0 = ButtonGadget(#PB_Any, 10, 360, 130, 30, "Close Editor") Procedure OpenWindow_0(X = 0, Y = 0, Width = 690, Height = 470) Width, height, padding, margin, border-width, outline and box-sizing in and in must be same.īy taking inspiration from this solution, I was able to separate myself from absolute positioning and sync_scroll.Code: Select all = Download: EditorExModule.pbi (with Dictionary and Hyphen-Pattern) Only parts that are in the view will be highlighted, any text below and above the scroll bar will be ignored.įont-size, font-family, line-height, text-indent and letter-spacing in and in must be same. ![]() The reason why CodeMirror, Ace, Monaco, and the like can work faster even though they have bigger source code is because they work on the stream. This is very inefficient and you will feel the difference when you open a very large document. '' + highlightCode(selectionBefore) + '' + SelectionAfter = encodeHTML(selectionAfter) SelectionBefore = encodeHTML(selectionBefore) We can add some CSS that basically allows the and the elements to be sized and spaced consistently. ![]() The idea is to visibly merge the elements together so it looks like we’re interacting with one element when there are actually two elements at work. There are a few bugs we’ll get to, but I want to focus first on making it look like you are directly editing the syntax-highlighted element, rather than a separate textarea. Now, when the textarea is edited - as in, a pressed key on the keyboard comes back up - the syntax-highlighted code changes. Let result_element = document.querySelector("#highlighting-content") I also added an aria-hidden attribute to the result so that screen readers would only read what is entered into the instead of being read aloud twice. I added both a syntax-highlighted and a textarea to the page, and made the innerText content of change oninput, using a JavaScript function. But, I thought, why not both? The solution Prism.js works a lot better when the source code is wrapped in a typical tag combo - it’s only missing the editable part of the equation. A textarea seems to be the only way to edit the text without unwanted bugs - it just doesn’t let Prism.js do its thing. In other words, we’re unable to style the content that’s entered. Next, I tried about using a but that also didn’t work, as textareas can only contain plain text. Each time the content in the element changes, the DOM is manipulated and the user’s cursor is pushed back to the start of the code, meaning the source code appears backwards, with the last characters at the start, and the first characters at the end. Seems like a decent idea, right? We have an element that can be edited on the front end, and Prism.js applies its syntax styling to what’s typed in the element.Ĭhris covers how to use Prism.js in this video.īut that was a no-go. I typed some source code into the div and ran it through Prism.js, a popular syntax highlighter, on oninput via JavaScript. First, I tried using the contenteditable attribute on a div.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |