punkweb-bb 0.2.2__py3-none-any.whl → 0.3.0__py3-none-any.whl

punkweb_bb/static/punkweb_bb/vendor/tiny-markdown-editor/src/TinyMDECommandBar.js

@@ -0,0 +1,256 @@
+import svg from './svg/svg';
+
+const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(typeof navigator !== "undefined" ? navigator.platform : "");
+
+const DefaultCommands = {
+  'bold': {
+    name: 'bold',
+    action: 'bold',
+    innerHTML: svg.bold,
+    title: 'Bold',
+    hotkey: 'Mod-B',
+  },
+  'italic': {
+    name: 'italic',
+    action: 'italic',
+    innerHTML: svg.italic,
+    title: 'Italic',
+    hotkey: 'Mod-I',
+  },
+  'strikethrough': {
+    name: 'strikethrough',
+    action: 'strikethrough',
+    innerHTML: svg.strikethrough,
+    title: 'Strikethrough',
+    hotkey: 'Mod2-Shift-5',
+  },
+  'code': {
+    name: 'code',
+    action: 'code',
+    innerHTML: svg.code,
+    title: 'Format as code',
+  },
+  'h1': {
+    name: 'h1',
+    action: 'h1',
+    innerHTML: svg.h1,
+    title: 'Level 1 heading',
+    hotkey: 'Mod-Shift-1',
+  },
+  'h2': {
+    name: 'h2',
+    action: 'h2',
+    innerHTML: svg.h2,
+    title: 'Level 2 heading',
+    hotkey: 'Mod-Shift-2',
+  },
+  'ul': {
+    name: 'ul',
+    action: 'ul',
+    innerHTML: svg.ul,
+    title: 'Bulleted list',
+  },
+  'ol': {
+    name: 'ol',
+    action: 'ol',
+    innerHTML: svg.ol,
+    title: 'Numbered list',
+  },
+  'blockquote': {
+    name: 'blockquote',
+    action: 'blockquote',
+    innerHTML: svg.blockquote,
+    title: 'Quote',
+    hotkey: 'Mod2-Shift-Q',
+  },
+  'insertLink': {
+    name: 'insertLink',
+    action: (editor) => {if (editor.isInlineFormattingAllowed()) editor.wrapSelection('[', ']()')},
+    enabled: (editor, focus, anchor) => editor.isInlineFormattingAllowed(focus, anchor) ? false : null,
+    innerHTML: svg.link,
+    title: 'Insert link',
+    hotkey: 'Mod-K',
+  },
+  'insertImage': {
+    name: 'insertImage',
+    action: (editor) => {if (editor.isInlineFormattingAllowed()) editor.wrapSelection('![', ']()')},
+    enabled: (editor, focus, anchor) => editor.isInlineFormattingAllowed(focus, anchor) ? false : null,
+    innerHTML: svg.image,
+    title: 'Insert image',
+    hotkey: 'Mod2-Shift-I',
+  },
+  'hr': {
+    name: 'hr',
+    action: (editor) => editor.paste('\n***\n'),
+    enabled: () => false,
+    innerHTML: svg.hr,
+    title: 'Insert horizontal line',
+    hotkey: 'Mod2-Shift-L'
+  }
+}
+
+
+class CommandBar {
+  constructor(props) {
+    this.e = null;
+    this.editor = null;
+    this.commands = [];
+    this.buttons = {};
+    this.state = {};
+    this.hotkeys = [];
+
+    let element = props.element;
+    if (element && !element.tagName) {
+      element = document.getElementById(props.element);
+    }
+    if (!element) {
+      element = document.body; 
+    }
+    this.createCommandBarElement(element, props.commands || ['bold', 'italic', 'strikethrough', '|', 'code', '|', 'h1', 'h2', '|', 'ul', 'ol', '|', 'blockquote', 'hr', '|', 'insertLink', 'insertImage']);
+    document.addEventListener('keydown', (e) => this.handleKeydown(e));
+    if (props.editor) this.setEditor(props.editor);
+  }
+
+  createCommandBarElement(parentElement, commands) {
+    this.e = document.createElement('div');
+    this.e.className = 'TMCommandBar';
+
+    for (let command of commands) {
+      if (command == '|') {
+        let el = document.createElement('div');
+        el.className = 'TMCommandDivider';
+        this.e.appendChild(el);
+      } else {
+        let commandName;
+        if (typeof command == "string") {
+          // Reference to default command
+
+          if (DefaultCommands[command]) {
+            commandName = command;
+            this.commands[commandName] = DefaultCommands[commandName];
+
+            
+          } else {
+            continue;
+          }
+          
+        } else if (typeof command == "object" && command.name) {
+          commandName = command.name;
+          this.commands[commandName] = {}; 
+          if (DefaultCommands[commandName]) Object.assign(this.commands[commandName], DefaultCommands[commandName]);
+          Object.assign(this.commands[commandName], command);
+        
+
+        } else {
+          continue;
+        }
+
+        let title = this.commands[commandName].title || commandName;
+
+        if (this.commands[commandName].hotkey) {
+          const keys = this.commands[commandName].hotkey.split('-');
+          // construct modifiers
+          let modifiers = [];
+          let modifierexplanation = [];
+          for (let i = 0; i < keys.length - 1; i++) {
+            switch (keys[i]) {
+              case 'Ctrl': modifiers.push('ctrlKey'); modifierexplanation.push('Ctrl'); break;
+              case 'Cmd': modifiers.push('metaKey'); modifierexplanation.push('⌘'); break;
+              case 'Alt': modifiers.push('altKey'); modifierexplanation.push('Alt'); break;
+              case 'Option': modifiers.push('altKey'); modifierexplanation.push('⌥'); break;
+              case 'Win': modifiers.push('metaKey'); modifierexplanation.push('⊞ Win'); break;
+
+              case 'Shift':  modifiers.push('shiftKey'); modifierexplanation.push('⇧'); break;
+
+              case 'Mod': // Mod is a convenience mechanism: Ctrl on Windows, Cmd on Mac
+                if (isMacLike) {modifiers.push('metaKey'); modifierexplanation.push('⌘');} 
+                else {modifiers.push('ctrlKey'); modifierexplanation.push('Ctrl');} 
+                break; 
+              case 'Mod2': 
+                modifiers.push('altKey'); 
+                if (isMacLike) modifierexplanation.push('⌥');
+                else modifierexplanation.push('Alt');
+                break; // Mod2 is a convenience mechanism: Alt on Windows, Option on Mac
+            }
+          }
+          modifierexplanation.push(keys[keys.length - 1]);
+          let hotkey = {
+            
+            modifiers: modifiers,
+            command: commandName,
+          };
+          // TODO Right now this is working only for letters and numbers
+          if (keys[keys.length - 1].match(/^[0-9]$/)) {
+            hotkey.code = `Digit${keys[keys.length - 1]}`;
+          } else {
+            hotkey.key = keys[keys.length - 1].toLowerCase();
+          }
+          this.hotkeys.push(hotkey);
+          title = title.concat(` (${modifierexplanation.join('+')})`);
+        }
+
+        this.buttons[commandName] = document.createElement('div');
+        this.buttons[commandName].className = 'TMCommandButton TMCommandButton_Disabled';
+        this.buttons[commandName].title = title;
+        this.buttons[commandName].innerHTML = this.commands[commandName].innerHTML;
+
+        this.buttons[commandName].addEventListener('mousedown', (e) => this.handleClick(commandName, e));
+        this.e.appendChild(this.buttons[commandName]);
+      }
+    }
+    parentElement.appendChild(this.e);
+  }
+
+  handleClick(commandName, event) {
+    if (!this.editor) return;
+    event.preventDefault();
+    if (typeof this.commands[commandName].action == "string") {
+      if (this.state[commandName] === false) this.editor.setCommandState(commandName, true);
+      else this.editor.setCommandState(commandName, false);  
+    } else if (typeof this.commands[commandName].action == "function") {
+      this.commands[commandName].action(this.editor);
+    }
+  }
+
+  setEditor(editor) {
+    this.editor = editor;
+    editor.addEventListener('selection', (e) => this.handleSelection(e));
+  }
+
+  handleSelection(event) {
+    if (event.commandState) {
+      for (let command in this.commands) {
+        if (event.commandState[command] === undefined) {
+          if (this.commands[command].enabled) this.state[command] = this.commands[command].enabled(this.editor, event.focus, event.anchor);
+          else this.state[command] = event.focus ? false : null;
+        } else {
+          this.state[command] = event.commandState[command];
+        }
+
+        if (this.state[command] === true) {
+          this.buttons[command].className = 'TMCommandButton TMCommandButton_Active';
+        } else if (this.state[command] === false) {
+          this.buttons[command].className = 'TMCommandButton TMCommandButton_Inactive';
+        } else {
+          this.buttons[command].className =  'TMCommandButton TMCommandButton_Disabled';
+        }
+      }
+    }
+  }
+
+  handleKeydown(event) {
+    outer: for (let hotkey of this.hotkeys) {
+      if ((hotkey.key && event.key.toLowerCase() == hotkey.key) || (hotkey.code && event.code == hotkey.code)) {
+        // Key matches hotkey. Look for any required modifier that wasn't pressed
+        for (let modifier of hotkey.modifiers) {
+          if (!event[modifier]) continue outer;
+        }
+        // Everything matches.
+        this.handleClick(hotkey.command, event);
+        return;
+      }
+    }
+  }
+}
+
+export default CommandBar;

punkweb_bb/static/punkweb_bb/vendor/tiny-markdown-editor/src/css/commandbar.css

@@ -0,0 +1,72 @@
+.TMCommandBar {
+  background-color: var(--oc-gray-1);
+  border: 1px solid var(--border);
+  border-bottom: none;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  /* height: 24px; */
+  /* border:4px solid var(--oc-gray-1); */
+  /* box-sizing: content-box; */
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  user-select: none;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.TMCommandBar::-webkit-scrollbar {
+  display: none;
+}
+
+.TMCommandButton {
+  /* box-sizing: border-box; */
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  /* padding:3px; */
+  /* margin-right:4px;  */
+  color: var(--oc-gray-9);
+  fill: var(--oc-gray-9);
+  text-align: center;
+  cursor: pointer;
+  vertical-align: middle;
+  font-size: 20px;
+  line-height: 18px;
+  font-family: sans-serif;
+}
+
+.TMCommandDivider {
+  /* box-sizing: content-box; */
+  height: 24px;
+  margin: 0 8px;
+  width: 0px;
+  border-left: 2px solid var(--border);
+}
+
+.TMCommandButton_Active {
+  font-weight: bold;
+  color: var(--primary-9);
+  background-color: var(--primary-2);
+  fill: var(--primary-9);
+}
+
+.TMCommandButton_Inactive {
+  background-color: var(--oc-gray-1);
+}
+
+.TMCommandButton_Disabled {
+  color: var(--oc-gray-7);
+  fill: var(--oc-gray-7);
+}
+
+@media (hover: hover) {
+  .TMCommandButton_Active:hover,
+  .TMCommandButton_Disabled:hover,
+  .TMCommandButton_Inactive:hover {
+    background-color: var(--primary-1);
+    fill: var(--oc-gray-9);
+  }
+}

punkweb_bb/static/punkweb_bb/vendor/tiny-markdown-editor/src/css/editor.css

@@ -0,0 +1,157 @@
+.TinyMDE {
+  background-color: #fff;
+  border: 1px solid var(--border);
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+  color: var(--oc-gray-9);
+  font-size: 16px;
+  line-height: 1.5;
+  outline: none;
+  padding: 0.5rem 1rem;
+  min-height: 12rem;
+}
+
+.TMBlankLine {
+  height: 1.5rem;
+}
+
+.TMH1,
+.TMSetextH1 {
+  font-size: 2rem;
+  line-height: 32px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.TMSetextH1 {
+  margin-bottom: 0px;
+}
+
+.TMSetextH1Marker {
+  margin-bottom: 8px;
+}
+
+.TMH2,
+.TMSetextH2 {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.TMMark_TMCode {
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+.TMFencedCodeBacktick,
+.TMFencedCodeTilde,
+.TMIndentedCode,
+.TMCode {
+  font-family: monospace;
+  font-size: 0.9em;
+  background-color: #e0e0e0;
+}
+
+.TMCodeFenceBacktickOpen,
+.TMCodeFenceTildeOpen {
+  border-bottom: 1px solid #c0c0c0;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+.TMCodeFenceBacktickClose,
+.TMCodeFenceTildeClose {
+  border-top: 1px solid #c0c0c0;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+.TMInfoString {
+  color: #0000ff;
+}
+
+.TMCode {
+  border: 1px solid #c0c0c0;
+  border-radius: 2px;
+}
+
+.TMBlockquote {
+  font-style: italic;
+  border-left: 2px solid #c0c0c0;
+  padding-left: 10px;
+  margin-left: 10px;
+}
+
+.TMMark {
+  color: #a0a0a0;
+}
+
+.TMMark_TMH1,
+.TMMark_TMH2 {
+  color: #ff8080;
+}
+
+.TMMark_TMUL,
+.TMMark_TMOL {
+  color: #ff8080;
+}
+
+.TMImage {
+  text-decoration: underline;
+  text-decoration-color: #00ff00;
+}
+
+.TMLink {
+  text-decoration: underline;
+  text-decoration-color: #0000ff;
+}
+
+.TMLinkLabel {
+  text-decoration: underline;
+  font-family: monospace;
+}
+
+.TMLinkLabel_Definition,
+.TMLinkLabel_Valid {
+  color: #40c040;
+}
+
+.TMLinkLabel_Invalid {
+  color: #ff0000;
+}
+
+.TMLinkTitle {
+  font-style: italic;
+}
+
+.TMLinkDestination,
+.TMAutolink {
+  text-decoration: underline;
+  color: #0000ff;
+}
+
+.TMHR {
+  position: relative;
+}
+
+.TMHR:before {
+  content: "";
+  position: absolute;
+  bottom: 50%;
+  left: 40%;
+  border-bottom: 2px solid #808080;
+  width: 20%;
+  z-index: 0;
+}
+
+.TMHTML,
+.TMHTMLBlock {
+  font-family: monospace;
+  font-size: 0.9em;
+  color: #8000ff;
+}
+
+.TMHTMLBlock {
+  color: #6000c0;
+}

punkweb_bb/static/punkweb_bb/vendor/tiny-markdown-editor/src/css/index.css

@@ -0,0 +1,3 @@
+@import "editor.css";
+
+@import "commandbar.css";