Skip to content

Commit

Permalink
Allow bold
Browse files Browse the repository at this point in the history
  • Loading branch information
tavaresasilva committed Jun 20, 2024
1 parent 5d56c70 commit 07ed9b9
Show file tree
Hide file tree
Showing 3 changed files with 196 additions and 3 deletions.
118 changes: 116 additions & 2 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,67 @@ <h1 contenteditable="true" data-placeholder="Untitled"></h1>

<div class="content">

<div class="draggable-block">

<div class="container">
<div class="item">
<span role="button" class="xpy">Ask AI</span>
</div>

<!-- <div class="item">
<span role="button" class="xpy">Text</span>
</div> -->

<select name="block-type" id="block-type-select">
<option value="volvo">Text</option>
<option value="saab">List</option>
<option value="mercedes">Code</option>
</select>

<div class="item">
<span role="button" class="xpy" title="Link">
<svg width="24" height="24" fill="currentColor">
<use href="#icon-wordpress-anchor"></use>
</svg>
</span>
<span id="bold-text-button" role="button" class="xpy" title="Bold">
<svg width="24" height="24" fill="currentColor">
<use href="#icon-wordpress-bold"></use>
</svg>
</span>
<span role="button" class="xpy" title="Italic">
<svg width="24" height="24" fill="currentColor">
<use href="#icon-wordpress-italic"></use>
</svg>
</span>
<span role="button" class="xpy" title="Underline">
<svg width="24" height="24" fill="currentColor">
<use href="#icon-material-underline"></use>
</svg>
</span>
<span role="button" class="xpy" title="Code">
<svg width="24" height="24" fill="currentColor">
<use href="#icon-wordpress-code-mark"></use>
</svg>
</span>
<span role="button" class="xpy" title="Strike-through">
<svg width="24" height="24" fill="currentColor">
<use href="#icon-wordpress-strike-through"></use>
</svg>
</span>
<span role="button" class="xpy" title="Equation">
<svg width="24" height="24" fill="currentColor">
<use href="#icon-wordpress-equation-mark"></use>
</svg>
</span>
</div>

</div>





<div class="draggable-block deletable">
<button class="drag-handler button-reset" draggable="true">
<svg width="20" height="20" fill="currentColor">
<use href="#icon-material-drag"></use>
Expand All @@ -51,7 +111,7 @@ <h1 contenteditable="true" data-placeholder="Untitled"></h1>
</div>

<div class="block-options-wrapper" style="display: none;" role="listbox">
<div class="block-options">
<div class="block-options" style="position: relative;">
<section class="basic-section">
<h2>Basic blocks</h2>

Expand Down Expand Up @@ -339,6 +399,8 @@ <h2>Embed</h2>

</section>

<span class="empty-block-options" style="display: none;">(˚Δ˚)b</span>

</div>
</div>

Expand Down Expand Up @@ -459,12 +521,64 @@ <h2>Embed</h2>







<!-- tags -->

<symbol id="icon-wordpress-bold" viewBox="0 0 24 24">
<path
d="M14.7 11.3c1-.6 1.5-1.6 1.5-3 0-2.3-1.3-3.4-4-3.4H7v14h5.8c1.4 0 2.5-.3 3.3-1 .8-.7 1.2-1.7 1.2-2.9.1-1.9-.8-3.1-2.6-3.7zm-5.1-4h2.3c.6 0 1.1.1 1.4.4.3.3.5.7.5 1.2s-.2 1-.5 1.2c-.3.3-.8.4-1.4.4H9.6V7.3zm4.6 9c-.4.3-1 .4-1.7.4H9.6v-3.9h2.9c.7 0 1.3.2 1.7.5.4.3.6.8.6 1.5s-.2 1.2-.6 1.5z">
</path>
</symbol>
<symbol id="icon-wordpress-italic" viewBox="0 0 24 24">
<path d="M12.5 5L10 19h1.9l2.5-14z"></path>
</symbol>
<symbol id="icon-wordpress-anchor" viewBox="0 0 24 24">
<path
d="M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z">
</path>
</symbol>

<symbol id="icon-wordpress-underline" viewBox="0 0 24 24">

</symbol>


<symbol id="icon-wordpress-strike-through" viewBox="0 0 24 24">
<path
d="M9.1 9v-.5c0-.6.2-1.1.7-1.4.5-.3 1.2-.5 2-.5.7 0 1.4.1 2.1.3.7.2 1.4.5 2.1.9l.2-1.9c-.6-.3-1.2-.5-1.9-.7-.8-.1-1.6-.2-2.4-.2-1.5 0-2.7.3-3.6 1-.8.7-1.2 1.5-1.2 2.6V9h2zM20 12H4v1h8.3c.3.1.6.2.8.3.5.2.9.5 1.1.8.3.3.4.7.4 1.2 0 .7-.2 1.1-.8 1.5-.5.3-1.2.5-2.1.5-.8 0-1.6-.1-2.4-.3-.8-.2-1.5-.5-2.2-.8L7 18.1c.5.2 1.2.4 2 .6.8.2 1.6.3 2.4.3 1.7 0 3-.3 3.9-1 .9-.7 1.3-1.6 1.3-2.8 0-.9-.2-1.7-.7-2.2H20v-1z">
</path>
</symbol>

<symbol id="icon-wordpress-code-mark" viewBox="0 0 24 24">
<path
d="M20.8 10.7l-4.3-4.3-1.1 1.1 4.3 4.3c.1.1.1.3 0 .4l-4.3 4.3 1.1 1.1 4.3-4.3c.7-.8.7-1.9 0-2.6zM4.2 11.8l4.3-4.3-1-1-4.3 4.3c-.7.7-.7 1.8 0 2.5l4.3 4.3 1.1-1.1-4.3-4.3c-.2-.1-.2-.3-.1-.4z">
</path>
</symbol>

<symbol id="icon-wordpress-equation-mark" viewBox="0 0 24 24">
<path
d="M16.9 10.3l.8-1.3c.4-.6.7-1.2.9-1.6.2-.4.3-.8.3-1.2 0-.3-.1-.7-.2-1-.2-.2-.4-.4-.7-.6-.3-.2-.6-.3-1-.3s-.8.1-1.1.2c-.3.1-.7.3-1 .6l.1 1.3c.3-.3.5-.5.8-.6s.6-.2.9-.2c.3 0 .5.1.7.2.2.2.2.4.2.7 0 .3-.1.5-.2.8-.1.3-.4.7-.8 1.3l-1.8 2.8h4.3v-1.2h-2.2zm-2.8-3.1h-2L9.5 11 6.9 7.2h-2l3.6 5.3L4.7 18h2l2.7-4 2.7 4h2l-3.8-5.5 3.8-5.3z">
</path>
</symbol>

<symbol id="icon-material-underline" viewBox="0 -960 960 960">
<path
d="M200-120v-80h560v80H200Zm280-160q-101 0-157-63t-56-167v-330h103v336q0 56 28 91t82 35q54 0 82-35t28-91v-336h103v330q0 104-56 167t-157 63Z" />
</symbol>



</svg>
</body>






<style>
:root {
font-size: 16px;
Expand Down
6 changes: 5 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,8 @@ import './block-operations.js';
import './keyboard-navigation.js';
import './text-blocks-from-newlines.js';
import './focus-on-p.js';
import './clear-form-pasting.js';
import './clear-form-pasting.js';
import './rich-text.js';


import './memento.js';
75 changes: 75 additions & 0 deletions src/rich-text.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
let savedSelection = null;

function saveSelection() {
if (window.getSelection) {
const sel = window.getSelection();
if (sel.rangeCount > 0) {
savedSelection = sel.getRangeAt(0).cloneRange();
}
}
}

function restoreSelection() {
const selection = window.getSelection();
if (savedSelection) {
selection.removeAllRanges();
selection.addRange(savedSelection);
}
}

function wrapSelectedTextWithStrong() {
restoreSelection();
const selection = window.getSelection();
if (selection.rangeCount) {
const range = selection.getRangeAt(0);
const strongTag = document.createElement('strong');
range.surroundContents(strongTag);
selection.removeAllRanges();
selection.addRange(range);
}
}

document.addEventListener('DOMContentLoaded', function () {
const boldButton = document.getElementById('bold-text-button');

if (boldButton) {
boldButton.addEventListener('mousedown', function(event) {
event.preventDefault();
saveSelection();
});

boldButton.addEventListener('click', function(event) {
toggleStrong();
});
}
});



function toggleStrong() {
const selection = window.getSelection();
if (!selection.rangeCount) return;

let range = selection.getRangeAt(0);
let container = range.commonAncestorContainer;

if (container.nodeType === 3) {
container = container.parentNode;
}

if (container.tagName === 'STRONG') {
const newRange = document.createRange();
newRange.selectNode(container);
selection.removeAllRanges();
selection.addRange(newRange);

const parent = container.parentNode;
while (container.firstChild) {
parent.insertBefore(container.firstChild, container);
}
parent.removeChild(container);
} else {
const strongTag = document.createElement('strong');
range.surroundContents(strongTag);
}
}

0 comments on commit 07ed9b9

Please sign in to comment.