aboutsummaryrefslogtreecommitdiff
path: root/src/lib/cards/Editor.svelte
blob: 6872e77386dc9ae0051a4275b2b7e37b4c172329 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<script lang="ts">
  import { ndk } from '$lib/ndk';
  import { wikiKind } from '$lib/consts';
  import { NDKEvent } from '@nostr-dev-kit/ndk';
  import { onMount } from 'svelte';
  import type { Tab } from '$lib/types';
  import { userPublickey } from '$lib/state';

  export let replaceSelf: (tab: Tab) => void;
  export let data: any;
  if (!data.title) data.title = '';
  if (!data.summary) data.summary = '';
  if (!data.content) data.content = '';
  let forkev: NDKEvent | null;

  let success = 0;
  let error: string = '';

  onMount(async () => {
    if (data.forkId) {
      forkev = await $ndk.fetchEvent(data.forkId);
      data.title =
        forkev?.tags.find((e) => e[0] == 'title')?.[0] &&
        forkev?.tags.find((e) => e[0] == 'title')?.[1]
          ? forkev.tags.find((e) => e[0] == 'title')?.[1]
          : forkev?.tags.find((e) => e[0] == 'd')?.[1];
      data.summary =
        forkev?.tags.find((e) => e[0] == 'summary')?.[0] &&
        forkev?.tags.find((e) => e[0] == 'summary')?.[1]
          ? forkev?.tags.find((e) => e[0] == 'summary')?.[1]
          : undefined;
      data.content = forkev?.content;
    }
  });

  async function publish() {
    if (data.title && data.content) {
      try {
        let event = new NDKEvent($ndk);
        event.kind = wikiKind;
        event.content = data.content;
        event.tags.push(['d', data.title.toLowerCase().replaceAll(' ', '-')]);
        event.tags.push(['title', data.title]);
        if (data.summary) {
          event.tags.push(['summary', data.summary]);
        }
        let relays = await event.publish();
        relays.forEach((relay) => {
          relay.once('published', () => {
            console.debug('published to', relay);
          });
          relay.once('publish:failed', (relay, err) => {
            console.debug('publish failed to', relay, err);
          });
        });
        success = 1;
      } catch (err) {
        console.debug('failed to publish event', err);
        error = String(err);
        success = -1;
      }
    }
  }
</script>

<div class="prose font-sans mx-auto p-2 lg:max-w-4xl">
  <div class="prose">
    <h1>
      {#if data.forkId && $userPublickey == forkev?.author?.hexpubkey()}Editing{:else if data.forkId}Forking{:else}Creating{/if}
      an article
    </h1>
  </div>
  <div class="mt-2">
    <label class="flex items-center"
      >Title
      <input
        placeholder="example: Greek alphabet"
        bind:value={data.title}
        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md ml-2"
      /></label
    >
  </div>
  <div class="mt-2">
    <label
      >Article
      <textarea
        placeholder="The **Greek alphabet** has been used to write the [[Greek language]] sincie the late 9th or early 8th century BC. The Greek alphabet is the ancestor of the [[Latin]] and [[Cyrillic]] scripts."
        bind:value={data.content}
        rows="9"
        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
      /></label
    >
  </div>
  <div class="mt-2">
    <details>
      <summary> Add an explicit summary? </summary>
      <label
        >Summary
        <textarea
          bind:value={data.summary}
          rows="3"
          placeholder="The Greek alphabet is the earliest known alphabetic script to have distict letters for vowels. The Greek alphabet existed in many local variants."
          class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
        /></label
      >
    </details>
  </div>

  <!-- Submit -->
  {#if success !== 1}
    <div class="mt-2">
      <button
        on:click={publish}
        class="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        >Submit</button
      >
    </div>
  {/if}

  <div>
    {#if success == -1}
      <p>Something went wrong :( note that only NIP07 is supported for signing</p>
      <p>
        Error Message: {error}
      </p>
    {:else if success == 1}
      <p>Success!</p>
    {/if}
  </div>
</div>