Commit fc524844 authored by chris's avatar chris

link tooltip in progress

parent 176853f9
......@@ -29,6 +29,7 @@ import { EditoriaSchema } from "wax-prosemirror-schema";
import { LinkToolTipPlugin } from "wax-prosemirror-plugins";
import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
import "wax-prosemirror-layouts/layouts/editoria-layout.css";
import "wax-prosemirror-layouts/vars/wax-editoria-vars.css";
import "wax-prosemirror-themes/themes/editoria-theme.css";
const extraNodes = {
......
export { default as MainMenuBar } from "./src/mainMenuBar/MainMenuBar";
export { default as SideMenuBar } from "./src/sideMenuBar/SideMenuBar";
export { default as LinkToolTip } from "./src/linkToolTip/LinkToolTip";
import React, { Component } from "react";
import { EditorView } from "prosemirror-view";
import "./linktooltip.css";
class LinkToolTip extends React.Component {
render() {
const { href, onEdit, onRemove } = this.props;
return (
<div className="wax-link-tooltip">
<div className="wax-link-tooltip-body">
<div className="wax-link-tooltip-row">Link tooltip</div>
</div>
</div>
);
}
}
export default LinkToolTip;
/*@import "./wax-custom-button.css";*/
.wax-link-tooltip {
display: flex;
justify-content: center;
left: -150px;
pointer-events: none;
position: absolute;
top: -70px;
width: 400px;
}
.wax-link-tooltip .wax-custom-button {
margin: 0 3px;
}
.wax-link-tooltip-href {
border: none;
color: var(--wax-link-color);
display: inline-block;
flex: 1;
margin: 0 6px 0 0;
max-width: 200px;
overflow: hidden;
padding: 6px 0;
position: relative;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
z-index: 2;
}
.wax-link-tooltip-row {
direction: row;
display: flex;
}
.wax-link-tooltip-body {
background: #fff;
border-radius: var(--wax-overlay-radius);
box-shadow: var(--wax-overlay-shadow);
box-sizing: border-box;
display: inline-block;
font-family: var(--wax-font-family);
font-size: var(--wax-font-size);
max-width: 400px;
padding: 10px;
pointer-events: auto;
}
.wax-link-tooltip-body::after {
background-color: #fff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.26);
content: "";
height: 20px;
left: 35%;
position: absolute;
top: 37px;
width: 20px;
transform: rotate(45deg);
z-index: 1;
}
:root {
--wax-font-family: "Arial";
--wax-font-size: 13px;
--wax-link-color: rgb(0, 0, 238);
--wax-overlay-radius: 3px;
--wax-overlay-shadow: 0 1px 2px rgba(0, 0, 0, 0.46);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment