`scss
.hypermultimedia {
iframe,
audio,
video {
background-color: #cfcfcf;
}

&__resize-gripper {
position: absolute;
margin: 0;
display: none;
z-index: 1;

.media-resize-clamp {
width: 10px;
height: 10px;
background-color: #1a73e8;
border: 1px solid #fff;
display: none;
z-index: 4;

&--rotate {
border-radius: 50%;
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
cursor: crosshair;

&::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 1.5px;
height: 30px;
background-color: #1a73e8;
}
}

&--left {
position: absolute;
top: 50%;
left: -5px;
transform: translateY(-50%);
cursor: ew-resize;
z-index: 2;
}

&--right {
position: absolute;
top: 50%;
right: -5px;
transform: translateY(-50%);
cursor: ew-resize;
z-index: 2;
}

&--top {
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
cursor: ns-resize;
z-index: 2;
}

&--bottom {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
cursor: ns-resize;
z-index: 2;
}

&--top-left {
position: absolute;
top: -5px;
left: -5px;
cursor: nwse-resize;
}

&--top-right {
position: absolute;
top: -5px;
right: -5px;
cursor: nesw-resize;
}

&--bottom-left {
position: absolute;
bottom: -5px;
left: -5px;
cursor: nesw-resize;
}

&--bottom-right {
position: absolute;
bottom: -5px;
right: -5px;
cursor: nwse-resize;
}
}

&--active {
border: 1.5px solid #1a73e8;
display: block;
.media-resize-clamp {
display: block;
}
}
}

&__modal {
padding: 8px 8px;
background-color: #fff;
border-radius: 6px;
display: flex;
align-items: center;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.1);
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;

&__divider {
border-left: 2px solid #e5e7eb;
height: 5px;
margin: 6px 10px;
}

select {
@apply border-gray-300 py-2 px-2 rounded-md;
&:hover {
background-color: #eee;
}
}

button {
border-color: #d1d5db;
padding: 8px;
border-radius: 0.375rem;
&:hover {
background-color: #eee;
}
}

&__btn--resize {
svg {
}
}

&--active {
background-color: #1a73e8;
fill: #fff;
&:hover {
svg {
fill: black;
}
}
svg {
fill: #fff;
}
}
}
}
`

`js
const twitterModal = (options) => {
const { editor, tooltip, tippyModal, iframe, wrapper } = options;
const nodePos = editor.view.posAtDOM(wrapper, 0);

// Get the node attributes.
const node = editor.state.doc.nodeAt(nodePos);
const { float, display, margin } = attrs.attrs;

// Remove all children from the modal, clear the modal content.
while (tippyModal.firstChild) node.removeChild(tippyModal.firstChild);

// Create a wrapper for the modal content.
const div = createElement("div", "twitter-modal__wrapper");

// Create action buttons for the node.
const buttonFloadLeft = createElement("button", "twitter-modal__fload__left");
const btnFloadRight = createElement("button", "twitter-modal__fload__right");

buttonFloadLeft.addEventListener("click", () => {
const { state, dispatch } = editor.view;
const { tr } = state;

tr.setNodeAttribute("Twitter", "float", "left");
tooltip.hide();
dispatch(tr);
});

btnFloadRight.addEventListener("click", () => {
const { state, dispatch } = editor.view;
const { tr } = state;

tr.setNodeAttribute("Twitter", "float", "right");
tooltip.hide();
dispatch(tr);
});

// Append the buttons to the modal.
div.append(buttonFloadLeft, btnFloadRight);

// Append the modal wrapper to the modal.
tippyModal.append(div);

// Update the modal position, and place it on the bottom of the iframe,
// then display the modal.
tooltip.update(editor.view, { placement: "bottom-start" }, iframe);
}
`