Merge branch 'master' into sass-modules-migration

src/images/icons/format-bold.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-type-bold"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M8.661 16c.805 0 1.536-.117 2.193-.351a4.953 4.953 0 001.69-.993c.47-.428.831-.947 1.081-1.557s.375-1.287.375-2.03c0-.29-.038-.588-.114-.893a4.123 4.123 0 00-.325-.87 3.937 3.937 0 00-.495-.754 4.412 4.412 0 00-.604-.597c-.17-.126-.17-.264 0-.412.381-.335.699-.772.953-1.311.254-.54.382-1.062.382-1.568 0-.64-.132-1.244-.394-1.813a4.628 4.628 0 00-1.081-1.484c-.458-.42-1-.753-1.627-.999A5.531 5.531 0 008.66 0h-6.14a.534.534 0 00-.362.14A.415.415 0 002 .456v15.086c0 .119.053.225.159.318.106.093.227.139.362.139h6.14zm-.127-9.852H5.826c-.17 0-.254-.075-.254-.223V3.437c0-.157.085-.235.254-.235h2.708c.45 0 .847.145 1.195.435.347.29.521.633.521 1.027 0 .394-.174.74-.521 1.038a1.784 1.784 0 01-1.195.446zm0 6.65H5.826c-.17 0-.254-.075-.254-.223v-2.99c0-.157.085-.235.254-.235h2.708c.56 0 1.004.177 1.335.53.33.353.495.75.495 1.188 0 .454-.165.856-.495 1.205-.33.35-.776.525-1.335.525z"></path></g></svg>

src/images/icons/format-functions.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-latex"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M13.392 16c.158 0 .299-.036.423-.108.123-.073.185-.155.185-.248v-1.778c0-.099-.062-.183-.185-.252a.848.848 0 00-.423-.104H6.85c-.138 0-.227-.028-.267-.083-.04-.055-.04-.105 0-.152l5.533-5.101c.158-.14.223-.265.193-.378a.755.755 0 00-.193-.325L6.88 2.707c-.04-.046-.042-.094-.007-.143.034-.05.13-.074.289-.074h6.17a.782.782 0 00.416-.108c.119-.073.178-.155.178-.248V.356c0-.093-.06-.175-.178-.248A.782.782 0 0013.333 0H2.905c-.158 0-.3.036-.423.108-.124.073-.185.155-.185.248v1.943c0 .128.037.236.11.326l.171.204 5.31 4.815c.04.047.065.106.075.178a.221.221 0 01-.074.195l-5.622 5.154c-.04.047-.094.113-.163.2A.512.512 0 002 13.7v1.943c0 .093.062.175.185.248a.822.822 0 00.423.108h10.784z"></path></g></svg>

src/images/icons/format-italic.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-type-italic"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M10.61 16c.12 0 .23-.046.329-.14a.633.633 0 00.191-.317l.457-2.176a.348.348 0 00-.064-.313.336.336 0 00-.276-.133H8.845c-.142-.008-.198-.086-.17-.235l1.892-9.372c.035-.149.124-.223.266-.223H13a.49.49 0 00.335-.14.62.62 0 00.196-.318L13.99.457a.542.542 0 00.011-.1.337.337 0 00-.085-.223.336.336 0 00-.276-.134H5.805a.49.49 0 00-.335.14.62.62 0 00-.196.317l-.457 2.176a.353.353 0 00.069.318c.074.093.168.14.281.14h2.18c.141 0 .198.074.17.223l-1.893 9.372c-.028.156-.113.235-.255.235H2.967a.489.489 0 00-.324.133.59.59 0 00-.197.313l-.435 2.176a.542.542 0 00-.011.1c0 .082.025.156.074.223.071.09.16.134.266.134h8.27z"></path></g></svg>

src/images/icons/format-list-numbered.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--list-ordered"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M2.748 11.5c.227 0 .443.034.646.103.203.069.381.164.534.286.155.123.276.267.364.432.089.168.134.35.134.543 0 .17-.042.333-.124.484a1.384 1.384 0 01-.19.269l-.062.061.047.035c.047.041.09.086.13.134l.058.075.075.122c.093.172.14.352.14.538 0 .201-.048.39-.143.566a1.44 1.44 0 01-.384.45c-.16.125-.344.223-.554.294-.21.072-.434.108-.67.108-.237 0-.461-.036-.671-.108a1.871 1.871 0 01-.555-.295 1.42 1.42 0 01-.382-.45 1.178 1.178 0 01-.132-.417L1 14.582l.002-.078.01-.05a.249.249 0 01.077-.111.283.283 0 01.121-.06l.07-.008h.708l.05.007c.044.01.084.028.12.056a.24.24 0 01.089.133l.006.054v.047l.005.077a.279.279 0 00.112.186c.088.066.213.101.378.101a.615.615 0 00.376-.102.29.29 0 00.12-.252.29.29 0 00-.12-.252.538.538 0 00-.262-.096l-.114-.007h-.1l-.051-.007a.292.292 0 01-.12-.059.244.244 0 01-.087-.13l-.006-.053.001-.57.01-.05a.249.249 0 01.078-.112.283.283 0 01.121-.06l.07-.008h.076l.112-.006a.454.454 0 00.224-.086.26.26 0 00.104-.222.246.246 0 00-.103-.213.533.533 0 00-.329-.09.527.527 0 00-.324.09.24.24 0 00-.098.148l-.006.065-.002.11-.01.05a.249.249 0 01-.081.112.292.292 0 01-.12.059l-.066.007h-.712l-.052-.007a.292.292 0 01-.12-.059.244.244 0 01-.087-.13l-.006-.054v-.096l.008-.135c.018-.141.062-.275.132-.402.091-.164.213-.307.366-.43.152-.122.33-.217.533-.286.203-.069.418-.103.645-.103zM15 13a1 1 0 01.117 1.993L15 15H7a1 1 0 01-.117-1.993L7 13h8zM2.777 5.5c.234 0 .454.034.66.101.207.068.389.164.544.288.156.124.28.27.372.437.093.17.14.355.14.551 0 .19-.049.37-.145.542-.07.123-.156.237-.258.34l-.108.1L2.71 8.932l1.52.001.053.006c.044.01.084.029.12.056.047.036.078.08.091.132l.007.054-.002.59-.01.05a.25.25 0 01-.083.113.298.298 0 01-.121.059L4.216 10H1.27l-.053-.007a.298.298 0 01-.122-.059.246.246 0 01-.089-.132L1 9.748v-.711l.004-.05a.26.26 0 01.04-.115l.034-.043.035-.033L3.04 7.167l.036-.036a.98.98 0 00.08-.114.295.295 0 00.055-.145.27.27 0 00-.099-.21c-.068-.062-.167-.094-.303-.094-.163 0-.285.032-.369.093a.244.244 0 00-.103.147l-.006.064-.002.123-.01.052a.25.25 0 01-.084.112.298.298 0 01-.12.058l-.069.008h-.726l-.053-.007a.298.298 0 01-.121-.059.246.246 0 01-.09-.132l-.006-.054V6.87l.01-.137c.017-.143.063-.28.135-.407.094-.167.22-.313.379-.437.157-.123.339-.219.544-.287.206-.067.425-.101.658-.101zM15 7a1 1 0 01.117 1.993L15 9H7a1 1 0 01-.117-1.993L7 7h8zM3.237 0l.052.008c.044.01.084.031.12.061a.248.248 0 01.083.132l.006.052-.004 3.167.744.001.051.007c.044.01.084.03.119.058.044.036.074.08.086.132l.006.053-.001.595-.01.05a.278.278 0 01-.197.176l-.07.008H1.29l-.051-.008a.287.287 0 01-.12-.061.248.248 0 01-.084-.132l-.006-.052.001-.596.01-.05a.247.247 0 01.077-.113.28.28 0 01.12-.06l.069-.008.932.002.003-1.959-.796.629-.068.037a.295.295 0 01-.196-.002.25.25 0 01-.172-.179L1 1.881v-.587l.007-.089.015-.075a.345.345 0 01.073-.132l.06-.059.83-.758.04-.036A.994.994 0 012.139.07a.498.498 0 01.183-.062L2.428 0h.809zM15 1a1 1 0 01.117 1.993L15 3H7a1 1 0 01-.117-1.993L7 1h8z"></path></g></svg>

src/images/icons/format-list-unordered.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--list-unordered"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M15 1a1 1 0 01.117 1.993L15 3H7a1 1 0 01-.117-1.993L7 1h8zm0 6a1 1 0 01.117 1.993L15 9H7a1 1 0 01-.117-1.993L7 7h8zM2 12a2 2 0 110 4 2 2 0 010-4zm13 1a1 1 0 01.117 1.993L15 15H7a1 1 0 01-.117-1.993L7 13h8zM2 6a2 2 0 110 4 2 2 0 010-4zm0-6a2 2 0 110 4 2 2 0 010-4z"></path></g></svg>

src/images/icons/format-quote.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-quote"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M2.701 14c.38 0 .659-.085.837-.255.177-.17.328-.343.45-.52l2.408-3.25c.246-.328.445-.725.598-1.19a4.69 4.69 0 00.23-1.475V2.775a.752.752 0 00-.23-.539A.713.713 0 006.47 2H1.947a.713.713 0 00-.524.236.752.752 0 00-.23.539v4.649c0 .214.077.396.23.548a.726.726 0 00.524.226h.901c.123 0 .23.054.322.161.092.107.101.224.028.35l-2.041 3.817c-.196.365-.208.702-.037 1.011.172.309.447.463.827.463h.754zm7.795 0c.367 0 .64-.085.818-.255.178-.17.328-.343.45-.52l2.409-3.25c.257-.328.46-.725.606-1.19A4.87 4.87 0 0015 7.31V2.775a.752.752 0 00-.23-.539.713.713 0 00-.524-.236H9.742a.703.703 0 00-.533.236.767.767 0 00-.22.539v4.649c0 .214.076.396.23.548a.726.726 0 00.523.226h.9c.123 0 .228.054.313.161.086.107.092.224.019.35L8.95 12.526c-.208.365-.223.702-.045 1.011.177.309.456.463.836.463h.754z"></path></g></svg>

src/images/icons/image.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--image"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 1v14H1V1h14zM1 15l3-8 4 6 3-4 4 6m-4-9a1 1 0 110-2 1 1 0 010 2z"></path></g></svg>

src/images/icons/link.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--link"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.069 3.042l1.057-1.274c1.193-1.106 3.035-.938 4.046 0 1.012.94 1.193 2.649 0 3.755L11.046 9.17m0 0c-1.193 1.107-2.853 1.107-4.046 0m-.069 3.788l-1.057 1.274c-1.193 1.106-3.035.938-4.046 0-1.012-.94-1.193-2.649 0-3.755L4.954 6.83m0 0C6.147 5.723 7.807 5.723 9 6.8"></path></g></svg>

src/sidebar/components/markdown-editor.js

@@ -12,6 +12,7 @@ const {
   toggleBlockStyle,
   toggleSpanStyle,
 } = require('../markdown-commands');
+const SvgIcon = require('./svg-icon');
 
 // Mapping of toolbar command name to key for Ctrl+<key> keyboard shortcuts.
 // The shortcuts are taken from Stack Overflow's editor.
@@ -94,7 +95,7 @@ function handleToolbarCommand(command, inputEl) {
 
 function ToolbarButton({
   disabled = false,
-  icon,
+  iconName,
   label = null,
   onClick,
   shortcutKey,
@@ -109,13 +110,18 @@ function ToolbarButton({
     <button
       className={classnames(
         'markdown-editor__toolbar-button',
-        icon && `h-icon-${icon}`,
         label && 'is-text'
       )}
       disabled={disabled}
       onClick={onClick}
       title={tooltip}
     >
+      {iconName && (
+        <SvgIcon
+          name={iconName}
+          className="markdown-editor__toolbar-button-icon"
+        />
+      )}
       {label}
     </button>
   );
@@ -123,7 +129,7 @@ function ToolbarButton({
 
 ToolbarButton.propTypes = {
   disabled: propTypes.bool,
-  icon: propTypes.string,
+  iconName: propTypes.string,
   label: propTypes.string,
   onClick: propTypes.func,
   shortcutKey: propTypes.string,
@@ -139,60 +145,74 @@ function Toolbar({ isPreviewing, onCommand, onTogglePreview }) {
     >
       <ToolbarButton
         disabled={isPreviewing}
-        icon="format-bold"
+        iconName="format-bold"
         onClick={() => onCommand('bold')}
         shortcutKey={SHORTCUT_KEYS.bold}
         title="Bold"
       />
       <ToolbarButton
         disabled={isPreviewing}
-        icon="format-italic"
+        iconName="format-italic"
         onClick={() => onCommand('italic')}
         shortcutKey={SHORTCUT_KEYS.italic}
         title="Italic"
       />
       <ToolbarButton
         disabled={isPreviewing}
-        icon="format-quote"
+        iconName="format-quote"
         onClick={() => onCommand('quote')}
         shortcutKey={SHORTCUT_KEYS.quote}
         title="Quote"
       />
       <ToolbarButton
         disabled={isPreviewing}
-        icon="link"
+        iconName="link"
         onClick={() => onCommand('link')}
         shortcutKey={SHORTCUT_KEYS.link}
         title="Insert link"
       />
       <ToolbarButton
         disabled={isPreviewing}
-        icon="insert-photo"
+        iconName="image"
         onClick={() => onCommand('image')}
         shortcutKey={SHORTCUT_KEYS.image}
         title="Insert image"
       />
       <ToolbarButton
         disabled={isPreviewing}
-        icon="functions"
+        iconName="format-functions"
         onClick={() => onCommand('math')}
         title="Insert math (LaTeX is supported)"
       />
       <ToolbarButton
         disabled={isPreviewing}
-        icon="format-list-numbered"
+        iconName="format-list-numbered"
         onClick={() => onCommand('numlist')}
         shortcutKey={SHORTCUT_KEYS.numlist}
         title="Numbered list"
       />
       <ToolbarButton
         disabled={isPreviewing}
-        icon="format-list-bulleted"
+        iconName="format-list-unordered"
         onClick={() => onCommand('list')}
         shortcutKey={SHORTCUT_KEYS.list}
         title="Bulleted list"
       />
       <span className="u-stretch" />
+      <div className="markdown-editor__toolbar-help-link">
+        <a
+          href="https://web.hypothes.is/help/formatting-annotations-with-markdown/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="markdown-editor__toolbar-button"
+          title="Formatting help"
+        >
+          <SvgIcon
+            name="help"
+            className="markdown-editor__toolbar-button-icon"
+          />
+        </a>
+      </div>
       <ToolbarButton
         label={isPreviewing ? 'Write' : 'Preview'}
         onClick={onTogglePreview}

src/sidebar/components/svg-icon.js

@@ -13,16 +13,24 @@ const icons = {
   'arrow-right': require('../../images/icons/arrow-right.svg'),
   cancel: require('../../images/icons/cancel.svg'),
   'collapse-menu': require('../../images/icons/collapse-menu.svg'),
-  'expand-menu': require('../../images/icons/expand-menu.svg'),
   copy: require('../../images/icons/copy.svg'),
   cursor: require('../../images/icons/cursor.svg'),
   email: require('../../images/icons/email.svg'),
+  'expand-menu': require('../../images/icons/expand-menu.svg'),
   external: require('../../images/icons/external.svg'),
   facebook: require('../../images/icons/facebook.svg'),
+  'format-bold': require('../../images/icons/format-bold.svg'),
+  'format-functions': require('../../images/icons/format-functions.svg'),
+  'format-italic': require('../../images/icons/format-italic.svg'),
+  'format-list-numbered': require('../../images/icons/format-list-numbered.svg'),
+  'format-list-unordered': require('../../images/icons/format-list-unordered.svg'),
+  'format-quote': require('../../images/icons/format-quote.svg'),
   groups: require('../../images/icons/groups.svg'),
   help: require('../../images/icons/help.svg'),
   highlight: require('../../images/icons/highlight.svg'),
+  image: require('../../images/icons/image.svg'),
   leave: require('../../images/icons/leave.svg'),
+  link: require('../../images/icons/link.svg'),
   lock: require('../../images/icons/lock.svg'),
   logo: require('../../images/icons/logo.svg'),
   public: require('../../images/icons/public.svg'),

src/styles/sidebar/components/markdown-editor.scss

@@ -20,16 +20,20 @@ $toolbar-border: 0.1em solid var.$grey-3;
 }
 
 .markdown-editor__toolbar-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   appearance: none;
   border: none;
   background: none;
+  min-width: 24px;
+  min-height: 24px;
 
   color: var.$grey-5;
-  font-size: 16px;
 
   &:hover,
   &:focus {
-    color: black;
+    color: $grey-7;
   }
 
   &:disabled {
@@ -39,6 +43,11 @@ $toolbar-border: 0.1em solid var.$grey-3;
   &.is-text {
     font-size: 13px;
   }
+
+  &-icon {
+    width: 10px;
+    height: 10px;
+  }
 }
 
 .markdown-editor__preview {
@@ -47,6 +56,12 @@ $toolbar-border: 0.1em solid var.$grey-3;
   padding: 10px;
 }
 
+.markdown-editor__toolbar-help-link {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2px; // Tweak to align help icon better with adjacent buttons
+}
+
 @media (pointer: coarse) {
   .markdown-editor__input {
     font-size: var.$touch-input-font-size;
@@ -73,6 +88,10 @@ $toolbar-border: 0.1em solid var.$grey-3;
   .markdown-editor__toolbar-button {
     min-width: var.$touch-target-size;
     min-height: var.$touch-target-size;
-    font-size: 20px;
+
+    &-icon {
+      width: 12px;
+      height: 12px;
+    }
   }
 }