fix: bugs from last commit

2024-10-18 05:23:28 +00:00 · 2022-11-30 12:59:57 -06:00 · 2022-11-30 12:59:57 -06:00 · 08f507bcf1
commit 08f507bcf1
parent 99996c72f1
8 changed files with 142 additions and 55 deletions
--- a/package.json
+++ b/package.json
@ -20,7 +20,7 @@
    "cross-fetch": "^3.1.5",
    "emoji-mart-vue-fast": "^10.2.1",
    "identicon.js": "2.3",
-    "markdown-it": "12.3",
+    "markdown-it": "13.0",
    "markdown-it-deflist": "2.1",
    "markdown-it-emoji": "^2.0.2",
    "markdown-it-highlightjs": "3.6",
--- a/src/components/BaseMarkdown.vue
+++ b/src/components/BaseMarkdown.vue
@ -38,6 +38,12 @@ md.use(subscript)
  // .use(markdownHighlightJs)
  .use(emoji)
  .use(md => {
+    // pulled from https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
+    // Remember old renderer, if overridden, or proxy to default renderer
+    var defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
+      return self.renderToken(tokens, idx, options)
+    }
+
    md.core.ruler.before('normalize', 'auto-imager', state => {
      state.src = state.src.replace(/https?:[^ \n]+/g, m => {
        if (m) {
@ -78,11 +84,6 @@ md.use(subscript)
        return `<video src="${src}" controls crossorigin async style="max-width: 90%; max-height: 50vh;"></video>`
      }
    }
-    // pulled from https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
-    // Remember old renderer, if overridden, or proxy to default renderer
-    var defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
-      return self.renderToken(tokens, idx, options)
-    }

    md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
      // If you are sure other plugins can't add `target` - drop check below
@ -102,6 +103,18 @@ md.use(subscript)
      // pass token to default renderer.
      return defaultRender(tokens, idx, options, env, self)
    }
+
+    md.renderer.rules.code_inline = function (tokens, idx, options, env, self) {
+      var token = tokens[idx]
+
+      return `<code ${self.renderAttrs(token)}>${token.content}</code>`
+    }
+
+    md.renderer.rules.code_block = function (tokens, idx, options, env, self) {
+      var token = tokens[idx]
+
+      return `<code ${self.renderAttrs(token)}>${token.content}</code>`
+    }
  })

 md.linkify
@ -261,6 +274,8 @@ ul ol {
  margin: 0;
 }
 .break-word-wrap {
+  word-wrap: break-word;
+  word-break: break-word;
 }
 .break-word-wrap p:has(img),
 .break-word-wrap p:has(video) {
@ -296,5 +311,8 @@ ul ol {
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 51%,rgba(255,255,255,0.7) 58%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 51%,rgba(255,255,255,0.7) 58%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
+
+  background-clip: text;
+  -webkit-background-clip: text;
 }
 </style>
--- a/src/components/BasePostEntry.vue
+++ b/src/components/BasePostEntry.vue
@ -89,6 +89,7 @@
          :options="[
            {value: 'emoji', slot: 'emoji'},
            {value: 'link', slot: 'link'},
+            {value: 'help', slot: 'help'},
            ]"
        >
          <template #emoji>
@ -122,6 +123,21 @@
              </q-tooltip>
            </q-btn>
          </template>
+          <template #help>
+            <q-btn
+              unelevated
+              class='no-padding button-link'
+              dense
+              size='sm'
+              @click.stop='toggleTool("help")'
+            >
+              <q-icon name='help' size='xs'/>
+              <!-- </q-icon> -->
+              <q-tooltip>
+                how to mention users and posts
+              </q-tooltip>
+            </q-btn>
+          </template>
          <!-- <template #image>
            <q-btn
              unelevated
@ -153,6 +169,21 @@
                @link-added='addLink'
              />
            </q-tab-panel>
+            <q-tab-panel name="help" class='q-pa-xs' @click.stop>
+              <div>
+                <span class='text-bold'>{{ "to mention a user: "}}</span>
+                {{ "type "}}
+                <code>{{`"@"`}}</code>
+                {{ " and select user from menu that pops up or paste in "}}
+                <code>{{`"@<pubkey-id>"`}}</code>
+              </div>
+              <!-- <br> -->
+              <div>
+                <span class='text-bold'>{{ "to mention a post: "}}</span>
+                {{ "paste in "}}
+                <code>{{`"&<event-id>"`}}</code>
+              </div>
+            </q-tab-panel>
          </q-tab-panels>
        </q-item>
      </div>
@ -205,7 +236,7 @@
          </q-circular-progress>
        </div>
        <q-btn-toggle
-          v-if='charLeft() <= 0'
+          v-if='!messageMode && (charLeft() <= 0)'
          v-model="longForm"
          unelevated
          dense
@ -520,7 +551,8 @@ export default {
      }

      // let text = this.textarea.innerText
-      let text = await this.formatMentionsForPublishing(tags, textarea)
+      // let text = await this.formatMentionsForPublishing(tags)
+      let text = await this.formatMentionsForPublishing(tags, true, textarea)
      this.appendHashtags(tags)
      text = this.appendLinks(text)
      // console.log('sendReply', {
@ -543,19 +575,20 @@ export default {
          tags.push(['p', this.$route.params.pubkey])
      }
      if (this.event && !tags.find(([_, v]) => v === this.event.id)) {
-          tags.push(['e', this.event.id])
+          tags.push(await getEventIdTagWithRelay(this.event.id, 'mention'))
+          // tags.push(['e', this.event.id])
      }
      // this.tags = this.tags.filter(([_, v]) => v !== this.$store.state.keys.pub)
      // let text = this.formatMentionsForPublishing(text, tags, mentions)
-      let text = await this.formatMentionsForPublishing(tags)
+      let text = await this.formatMentionsForPublishing(tags, false)
      text = this.appendLinks(text)

-      console.log('sendChatMessage', {
-        now,
-        pubkey: this.$route.params.pubkey,
-        text,
-        tags
-      })
+      // console.log('sendChatMessage', {
+      //   now,
+      //   pubkey: this.$route.params.pubkey,
+      //   text,
+      //   tags
+      // })
      return await this.$store.dispatch('sendChatMessage', {
        now,
        pubkey: this.$route.params.pubkey,
@ -636,25 +669,38 @@ export default {
      return mentions
    },

-    async formatMentionsForPublishing(tags, textarea = this.textarea.cloneNode(true)) {
+    async formatMentionsForPublishing(tags, parseProfile = true, textarea = this.textarea.cloneNode(true)) {
      // let textarea = this.textarea.cloneNode(true)
      let mentions = this.mentions(textarea)
-        for (let key in mentions) {
-          let mention = mentions[key]
-          let idx = tags.findIndex(([t, v]) => t === mention.tag[0] && v === mention.tag[1])
-          // console.log('idx', idx)
-          if (idx === -1) {
-            let tag
-            if (mention.tag[0] === 'p') tag = await getPubKeyTagWithRelay(mention.tag[1])
-            else if (mention.tag[0] === 'e') tag = await getEventIdTagWithRelay(mention.tag[1], 'mention')
+      let last = { el: null, offset: null}
+      for (let key in mentions) {
+        let mention = mentions[key]
+        let idx = tags.findIndex(([t, v]) => t === mention.tag[0] && v === mention.tag[1])
+        // console.log('idx', idx)
+        if (idx === -1) {
+          let tag
+          if (mention.tag[0] === 'p' && parseProfile) tag = await getPubKeyTagWithRelay(mention.tag[1])
+          else if (mention.tag[0] === 'e') tag = await getEventIdTagWithRelay(mention.tag[1], 'mention')
+          if (tag) {
            tags.push(tag)
            idx = tags.length - 1
          }
-          let range = new Range()
-          range.setStart(mention.el, mention.pos)
-          range.setEnd(mention.el, mention.pos + mention.length)
-          this.insertText(`#[${idx}]`, range)
        }
+        if (last.el && last.el !== mention.el) last.offset = 0
+        let offset = (last.el && last.el === mention.el) ? last.offset : 0
+        let range = new Range()
+        range.setStart(mention.el, mention.pos + offset)
+        range.setEnd(mention.el, mention.pos + mention.length + offset)
+        let newText = (mention.tag[0] === 'p' && !parseProfile) ? `@${mention.tag[1]}` : `#[${idx}]`
+        this.insertText(newText, range)
+        last = {
+          el: mention.el,
+          offset: newText.length - mention.length + last.offset || 0
+        }
+        // if (mention.tag[0] === 'p' && !parseProfile) {
+        //   this.insertText(`@${mention.tag[1]}`, range)
+        // } else this.insertText(`#[${idx}]`, range)
+      }
      textarea.style.maxHeight = '0'
      this.postEntry.appendChild(textarea)
      let text = textarea.innerText
@ -793,12 +839,12 @@ export default {

    textareaFocus(e) {
      const placeholder = this.placeholder
-      placeholder.style.opacity = '.5'
+      placeholder.style.opacity = '.3'
    },

    textareaBlur(e) {
      const placeholder = this.placeholder
-      placeholder.style.opacity = '.8'
+      placeholder.style.opacity = '.6'
    },

    colorText(text) {
@ -977,7 +1023,7 @@ ul, li {
 .input-area #input-placeholder {
  position: absolute;
  pointer-events: none;
-  opacity: .8;
+  opacity: .5;
  outline: none;
  border: none;
 }
@ -1013,6 +1059,9 @@ ul, li {
  background: transparent;
  pointer-events: none;
 }
+.q-tab-panel {
+  background: var(--q-background);
+}
 </style>

 <style lang='scss'>
--- a/src/pages/Profile.vue
+++ b/src/pages/Profile.vue
@ -39,7 +39,6 @@
            color='secondary'
            class='no-padding'
            :loading='searching'
-            @clear.stop='searchText=""'
            @submit="search"
            @keypress.ctrl.enter="search"
          >
@ -57,8 +56,8 @@
            </template>
          </q-input>
        </q-form>
-        <div v-if='results.length'>
-          <BasePostThread v-for="result in results" :key="result[0].id" :events="result" @add-event='addEvent'/>
+        <div v-if='searchResults.length'>
+          <BasePostThread v-for="result in searchResults" :key="result[0].id" :events="result" @add-event='addEvent'/>
        </div>
        <div v-if='!searchText'>
          <BasePostThread v-for="thread in threads" :key="thread[0].id" :events="thread" @add-event='addEvent'/>
@ -152,6 +151,13 @@ export default defineComponent({
    }
  },

+  computed: {
+    searchResults() {
+      if (this.searchText.length) return this.results
+      return []
+    }
+  },
+
  activated() {
    this.start()
  },
@ -183,7 +189,7 @@ export default defineComponent({
        this.follows = event.tags
          .filter(([t, v]) => t === 'p' && v)
          .map(([_, v]) => v)
-        this.relays = JSON.parse(event.content)
+        this.relays = event.content.length ? JSON.parse(event.content) : []
        if (this.follows.length)
          this.follows.forEach(pubkey => this.useProfile(pubkey))
      })
@ -200,12 +206,12 @@ export default defineComponent({
      this.profilesUsed.forEach(pubkey => this.$store.dispatch('cancelUseProfile', {pubkey}))
    },

-    processUserNotes(events, threads) {
+    processUserNotes(events, threads, checkDups = true) {
      for (let event of events) {
-        if (this.eventsSet.has(event.id)) continue
+        if (this.eventsSet.has(event.id) && checkDups) continue

        this.interpolateEventMentions(event)
-        this.eventsSet.add(event.id)
+        if (checkDups) this.eventsSet.add(event.id)
        addToThread(threads, event)
      }
    },
@ -244,7 +250,7 @@ export default defineComponent({
          json_extract(event,'$.content') LIKE '%${this.searchText.replace(' ', '%')}%'
      `)
      let searchResults = result.map(row => JSON.parse(row.event))
-      this.processUserNotes(searchResults, this.results)
+      this.processUserNotes(searchResults, this.results, false)
      this.searching = false
      console.log('result ', searchResults)
    },
--- a/src/query.worker.js
+++ b/src/query.worker.js
@ -560,7 +560,7 @@ const methods = {
      FROM nostr
      WHERE id = '${id}'
    `)
-    return JSON.parse(result[0].event)
+    return result.length ? JSON.parse(result[0].event) : null
  },

  dbStreamEvent(id, updates, callback) {
--- a/src/utils/event.js
+++ b/src/utils/event.js
@ -22,7 +22,7 @@ export function metadataFromEvent(event) {
 }

 export function isValidEvent(event) {
-  if (event.tags.filter(([_, v]) => !v || v.includes(' ')).length) return false
+  if (event.tags.filter(([t, v]) => t === 'e' && (!v || v.includes(' '))).length) return false
  try {
    JSON.parse(event.content)
    return false
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@ -121,20 +121,29 @@ export default {
      const hashtagReplacer = (match, hashtag) => {
        return `[${match}](/hashtag/${hashtag})`
      }
+      const untaggedProfileReplacer = (match, profile) => {
+        const displayName = this.$store.getters.displayName(profile)
+        return `[@${displayName}](/${profile})`
+      }

      let replacedText = text.replace(/#\[(\d+)\]/g, replacer)
      let hashtagReplacedText = replacedText.replace(/#([\w]{1,63})/g, hashtagReplacer)
+      let untaggedProfileReplacedText = hashtagReplacedText.replace(/@([\w]{64})/g, untaggedProfileReplacer)
+      let replacedTextFinal = untaggedProfileReplacedText

      let rootIdx = tags.findIndex(([t, v, _, marker]) => (t === 'e') && v && marker === 'root')
      if (rootIdx >= 0) {
        let [_, v] = tags[rootIdx]
        if (!mentions.mentionEvents.includes(v) && mentions.replyEvents.length < 2) mentions.replyEvents.push(v)
-        let replyIdx = tags.find(([t, v, _, marker]) => (t === 'e') && v && marker === 'root')
+        let replyIdx = tags.find(([t, v, _, marker]) => (t === 'e') && v && marker === 'reply')
        if (replyIdx >= 0) {
          let [_, v] = tags[replyIdx]
          if (!mentions.mentionEvents.includes(v) && mentions.replyEvents.length < 2) mentions.replyEvents.push(v)
        }
      }
+      tags.filter(([t, v, _, marker]) => (t === 'e') && v && marker === 'mention').forEach(([t, v], index) => {
+        if (!mentions.mentionEvents.includes(v)) mentions.mentionEvents.push(v)
+      })
      tags.filter(([t, v]) => (t === 'e') && v).forEach(([t, v], index) => {
        if (!mentions.mentionEvents.includes(v) && !mentions.replyEvents.includes(v)) {
          // if (index < 2) mentions.replyEvents.push(v)
@ -144,7 +153,7 @@ export default {
      })

      return {
-        text: hashtagReplacedText,
+        text: replacedTextFinal,
        replyEvents: mentions.replyEvents,
        mentionEvents: mentions.mentionEvents
      }
--- a/yarn.lock
+++ b/yarn.lock
@ -2882,11 +2882,16 @@ enhanced-resolve@^5.0.0, enhanced-resolve@^5.10.0:
    graceful-fs "^4.2.4"
    tapable "^2.2.0"

-entities@^2.0.0, entities@~2.1.0:
+entities@^2.0.0:
  version "2.1.0"
  resolved "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz"
  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==

+entities@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 error-ex@^1.3.1:
  version "1.3.2"
  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
@ -4055,10 +4060,10 @@ lines-and-columns@^1.1.6:
  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==

-linkify-it@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz"
-  integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
+linkify-it@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
+  integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
  dependencies:
    uc.micro "^1.0.1"

@ -4256,14 +4261,14 @@ markdown-it-task-lists@2.1:
  resolved "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz"
  integrity sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==

-markdown-it@12.3:
-  version "12.3.2"
-  resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz"
-  integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
+markdown-it@13.0:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
+  integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
  dependencies:
    argparse "^2.0.1"
-    entities "~2.1.0"
-    linkify-it "^3.0.1"
+    entities "~3.0.1"
+    linkify-it "^4.0.1"
    mdurl "^1.0.1"
    uc.micro "^1.0.5"